Nav
La lista de los lugares del producto, con el lugar actual marcado.
En esta página
Playground
Iconos
Grupos
Fondo
<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
<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
- Título del grupo, opcional: cuando hay más de un grupo.
- Lugar actual: papel colocado, línea de tinta y negrita.
- Otros lugares: subrayado al pasar el cursor por encima.
Hacer y no hacer
Do
Lugar actual: un cuadro con una línea: legible en cualquier pantalla y sin color.
Don’t
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 conaria-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. |