Nav

La liste des lieux du produit, avec le lieu actuel marqué.

Sur cette page

Playground

Icônes

Groupes

Fond

HTML

<nav class="feitio-nav" aria-label="Principale"><div class="group"><p class="group-title">Travail</p><ul><li><a href="#playground" aria-current="page">Rendez-vous</a></li><li><a href="#playground">Tâches</a></li></ul></div></nav>

Quand l'utiliser

À l'intérieur d'AppShell ou DocPage, pour les principaux lieux. Jusqu'à environ sept entrées par groupe.

Quand ne pas l'utiliser

Pour les actions ("Nouveau calendrier") : un bouton, dans le contenu.
Pour les étapes d'un flux : le comptage dans le contenu ("Étape 2 sur 3").

Exemples

Travail

Schedules
Tasks

Produit

Settings

Avec des groupes

Le lieu actuel est placé en papier : fond, ligne d'encre et gras. Trois signaux, aucune couleur seule.

Afficher le code

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

Travail

Schedules
Tasks

Titre du groupe, optionnel : lorsqu'il y a plus d'un groupe.
Lieu actuel : papier posé, ligne d'encre et gras.
Autres lieux : souligné au survol.

Lieu actuel : une boîte avec une ligne : lisible sur n'importe quel écran et sans couleur.

Don’t

Calendriers
Tâches

Une bande latérale colorée et uniquement le changement de couleur du texte : aspect fait main.

Écriture

Le nom du lieu, au nom, identique au titre de l'écran qu'il ouvre.

Un <nav> nommé ; le lieu actuel avec aria-current="page".
Avec des groupes, chaque liste prend le titre du groupe comme son nom.

Attributs

Attribut	Valeurs	Pour quoi
`class="feitio-nav"`	obligatoire	Groupes espacés de `space-5`.
`class="group"`, `"group-title"`	optionnel	Un groupe titré.
`aria-current="page"`	sur l'emplacement actuel	Papier posé, ligne d'encre et gras.

Nav