Tipos de navegación y pestañas
Navegación horizontal simple
Permite a las personas usuarias a navegar por las vistas sin salir de la página. Siempre contienen al menos dos elementos y una esta activa a la vez. Generalmente se utilizan en encabezados o secciones grandes.
Navegación horizontal con borde
Se agregan bordes cuando hay otros elementos en la página que a partir de su cercanía puedan confundir o interferir con el comportamiento de la navegación.
Navegación horizontal con ícono
Los íconos se pueden mostrar en los elementos de la navegación cuando sean absolutamente necesarios: cuando agregar un valor esencial y tienen una fuerte asociación con la etiqueta.
Navegación vertical
La navegación vertical debe usarse cuando el espacio horizontal es más amplio y cuando la lista de secciones es mayor de lo que se puede presentar al usuario en un formato horizontal. También se pueden usar como anclas dentro del contenido en una sola página.
Pestañas con ancho variable
Las pestañas se pueden usar para organizar contenido como formularios, configuraciones y tableros para que un usuario no tenga que navegar fuera de su flujo de trabajo para completar su tarea.
Pestañas con ancho fijo
Se utilizan para organizar contenido de mayor jerarquía y cuando se requiere una lista de secciones acotada.
Pestañas con ícono
Los íconos se pueden mostrar en las pestañas cuando agregan un valor esencial y tienen una fuerte asociación con la etiqueta.
Tamaños
Grande
Mediano
Chico
Diseño y estructura (contexto de uso)
Encabezados
Las navegaciones pueden combinarse con otros componentes, como campos de formulario, botones y desplegables.
Pestañas desplazables
Para los casos en donde la página requiere más pestañas o se necesita adaptar a un nuevo tamaño de navegador, las pestañas deben ser desplazables. Aparecen flechas izquierda y derecha para navegar a través de pestañas que no son visibles para el usuario en la página.
Las pestañas pueden estar determinadas por botones o enlaces.