Contenido
Definición
Las tabs o pestañas organizan y permiten la navegación entre grupos de contenido que están relacionados y en el mismo nivel de jerarquía. Son informativas porque organizan el contenido en categorías para facilitar a los usuarios encontrar fácilmente diferentes tipos de información.
Tienen como ventaja que permite mayor cantidad de información en un espacio limitado, pero hay que tener en cuenta que con ellas se oculta contenido al ser menos visible por lo que la recomendación sería considerar si es mejor:
- Simplificar y reducir la cantidad de contenido
- Dividir el contenido en varias páginas
- Mantener el contenido en una sola página, separado por encabezados
Anatomía
Las tabs se componen de:
- Lista de pestañas: Pestañas disponibles
- Pestaña seleccionada: Se presenta el contenido del contenedor seleccionado
- Pestaña no seleccionada: contenedor no seleccionado
- Etiqueta: Cada pestaña debe llevar su correspondiente etiqueta
- Contenido: Contenido de la pestaña seleccionada
Tipos
Por defecto
Pautas de uso
Utiliza las tabs solo cuando incluyan información no crítica
- La información ubicada en pestañas secundarias corre el riesgo de no ser consultada, especialmente si no aparece en la primera posición o si el usuario no percibe claramente su relevancia.
- No utilices tabs si la información es crítica
Ordena las pestañas por prioridad
- La primera pestaña debe contener la información más consultada y/o relevante
Utiliza tabs para alternar información dentro de un mismo contexto
- Este componente agrupa contenidos relacionados con un mismo objeto o proceso, presentados al mismo nivel de detalle y sin jerarquía entre ellos.
- Evita usar tabs para navegación global o para contenido que no esté directamente relacionado.
Limita la cantidad de tabs al ancho típico de la página
- El número de tabs no debe superar el ancho disponible; evita que se generen múltiples filas.
- Mantén una sola fila para garantizar claridad y consistencia.
- Las etiquetas deben ser cortas y claras (1-2 palabras), usando lenguaje sencillo y comprensible.
Componentes relacionados
Similar a:
Forma parte de:
Recursos asociados al componente
Implementación:
Storybook (solo accesible desde la RCJA)