# Nav

Die Liste der Produktorte, mit dem aktuellen Ort markiert.

## Playground

```html
<nav class="feitio-nav" aria-label="Haupt"><div class="group"><p class="group-title">Arbeit</p><ul><li><a href="#playground" aria-current="page">Termine</a></li><li><a href="#playground">Aufgaben</a></li></ul></div></nav>
```

## Wann verwenden

-   Innerhalb AppShell oder DocPage, für die Hauptorte. Bis zu etwa sieben Einträge pro Gruppe.

## Wann nicht verwenden

-   **Für Aktionen** ("Neue Planung"): ein Button, im Inhalt.
-   **Für die Schritte eines Flusses:** die Anzahl im Inhalt ("Schritt 2 von 3").

## Beispiele

### Mit Gruppen

Der aktuelle Ort ist Platz Papier: Hintergrund, Tinte Linie und Fett. Drei Signale, keine Farbe allein.

Code anzeigen

```html
<div class="feitio-nav">
  <div class="group">
    <p class="group-title" id="g-trabalho">Trabalho</p>
    <ul aria-labelledby="g-trabalho">
      <li><a href="/agendamentos" aria-current="page">…Agendamentos</a></li>
      <li><a href="/tarefas">…Tarefas</a></li>
    </ul>
  </div>
</div>
```

## Anatomie

1.  **Gruppentitel**, optional: wenn es mehrere Gruppen gibt.
2.  **Befindlicher Ort:** platziertes Papier, Tintenlinie und fetter Text.
3.  **Andere Orte:** Unterstrich beim Hover.

## Do and don't

Do

-   [Richtpläne](#padroes)
-   [Aufgaben](#padroes)

Befindlicher Ort ist ein Kasten mit einer Linie: auf jedem Bildschirm lesbar und ohne Farbe.

Don’t

-   [Richtpläne](#padroes)
-   [Aufgaben](#padroes)

Eine farbige Seitenleiste und nur der Textfarbe ändert sich: maschineller Look.

## Schreiben

-   Der Name des Ortes, als Substantiv, identisch mit dem Titel des Bildschirms, den es öffnet.

## Barrierefreiheit

-   Ein benanntes `<nav>`; der befindliche Ort mit `aria-current="page"`.
-   Mit Gruppen nimmt jede Liste den Gruppentitel als ihren Namen.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-nav"`

erforderlich

Gruppen `space-5` voneinander entfernt.

`class="group"`, `"group-title"`

optional

Eine titelhaltige Gruppe.

`aria-current="page"`

am aktuellen Ort

Platzierter Papier, Tintenlinie und Fettdruck.