# Nav

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

## Playground

```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

### 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

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

## Faire et ne pas faire

Do

-   [Calendriers](#padroes)
-   [Tâches](#padroes)

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

Don’t

-   [Calendriers](#padroes)
-   [Tâches](#padroes)

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.

## Accessibilité

-   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.