# Nav

La lista de los lugares del producto, con el lugar actual marcado.

## Playground

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

## Cuándo usarlo

-   Dentro de AppShell o DocPage, para los lugares principales. Hasta aproximadamente siete entradas por grupo.

## Cuándo no usarlo

-   **Para acciones** ("Nuevo calendario"): un Botón, en el contenido.
-   **Para los pasos de un flujo:** la cuenta en el contenido ("Paso 2 de 3").

## Ejemplos

### Con grupos

El lugar actual se coloca en papel: fondo, línea de tinta y negrita. Tres señales, ninguna por sí sola a través del color.

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

## Anatomía

1.  **Título del grupo**, opcional: cuando hay más de un grupo.
2.  **Lugar actual:** papel colocado, línea de tinta y negrita.
3.  **Otros lugares:** subrayado al pasar el cursor por encima.

## Hacer y no hacer

Do

-   [Cronogramas](#padroes)
-   [Tareas](#padroes)

Lugar actual: un cuadro con una línea: legible en cualquier pantalla y sin color.

Don’t

-   [Cronogramas](#padroes)
-   [Tareas](#padroes)

Borde lateral coloreado y solo el color del texto cambiando: aspecto fabricado por máquina.

## Escritura

-   El nombre del lugar, como sustantivo, igual que el título de la pantalla que abre.

## Accesibilidad

-   Un `<nav>` nombrado; el lugar actual con `aria-current="page"`.
-   Con grupos, cada lista toma el título del grupo como su nombre.

## Atributos

Atributo

Valores

Para qué sirve

`class="feitio-nav"`

obligatorio

Grupos separados por `space-5`.

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

opcional

Un grupo titulado.

`aria-current="page"`

en el lugar actual

Papel colocado, línea de tinta y negrita.