Nav

Die Liste der Produktorte, mit dem aktuellen Ort markiert.

Auf dieser Seite

Playground

Symbole

Gruppen

Hintergrund

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

Aufgaben

Schedules
Tasks

Produkt

Settings

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

Aufgaben

Schedules
Tasks

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

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

Don’t

Richtpläne
Aufgaben

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.

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.

Nav