Nav

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

Nesta página

Playground

Ícones

Grupos

Fundo

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

Trabalho

Agendamentos
Tarefas

Produto

Ajustes

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

Trabalho

Agendamentos
Tarefas

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

Bons e maus padrões

Faça assim

Agendamentos
Tarefas

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

Não faça

Agendamentos
Tarefas

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.

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.

Nav