# Nav

A lista dos lugares do produto, com o lugar atual marcado.

## Playground

```html
<nav class="feitio-nav" aria-label="Principal"><div class="group"><p class="group-title">Trabalho</p><ul><li><a href="#playground" aria-current="page">Agendamentos</a></li><li><a href="#playground">Tarefas</a></li></ul></div></nav>
```

## Quando usar

-   Dentro do AppShell ou do DocPage, para os lugares principais. Até umas sete entradas por grupo.

## Quando não usar

-   **Para ações** ("Novo agendamento"): um Button, no conteúdo.
-   **Para os passos de um fluxo:** a contagem no conteúdo ("Passo 2 de 3").

## Exemplos

### Com grupos

O lugar atual é papel colocado: fundo, traço de tinta e negrito. Três sinais, nenhum só de cor.

Mostrar código

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

## Anatomia

1.  **Título do grupo**, opcional: quando há mais de um grupo.
2.  **Lugar atual:** papel colocado, traço de tinta e negrito.
3.  **Outros lugares:** sublinham com o mouse por cima.

## Bons e maus padrões

Faça assim

-   [Agendamentos](#padroes)
-   [Tarefas](#padroes)

O lugar atual é uma caixa com traço: lê-se em qualquer tela, e sem cor.

Não faça

-   [Agendamentos](#padroes)
-   [Tarefas](#padroes)

Faixa colorida do lado e só a cor do texto mudando: cara de feito por máquina.

## Como escrever

-   O nome do lugar, como substantivo, igual ao título da tela que ele abre.

## Acessibilidade

-   Um `<nav>` com nome; o lugar atual com `aria-current="page"`.
-   Com grupos, cada lista leva o título do grupo como nome.

## Atributos

Atributo

Valores

Para quê

`class="feitio-nav"`

obrigatório

Os grupos a `space-5` um do outro.

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

opcional

Um grupo com título.

`aria-current="page"`

no lugar atual

Papel colocado, traço de tinta e negrito.