Gobierno de España Dintel Diseño Normalizado de Trámites Electrónicos Inicio Primeros pasos Fundamentos Componentes Módulos Plantillas Tokens Soporte

Árbol

El árbol es una visualización de una estructura jerárquica. Cada nivel se puede expandir, ver sus subniveles y poder navegar al hacer click en ellos.

Vista Previa

Figma
Vista previa árbol de contenido

Usos

Cuándo usar

Para organizar grandes cantidades de información que pueden anidar en múltiples niveles.

Cuándo no usar

Cuando solo necesita unos nivel de información anidada. Para este caso sería mejor usar el acordeón. Como navegación principal en la interfaz de un producto.

Comportamiento

Tipo

Representación gráfica de un elemento de nivel con elementos desplegables
Desplegable: Se utiliza cuando tiene niveles por debajo en la jerarquía.
Representación gráfica de un elemento de nivel sin elementos desplegables
Navegable: Se utiliza cuando no tenga niveles por debajo en la jerarquía.

Estado

Visualización de un elemento de árbol por defecto
Default
Visualización de un elemento de árbol abierto
Open
Visualización de un elemento de árbol en estado hover
Hover
Visualización de un elemento de árbol con foco
Focus
Visualización de un elemento de árbol presionado
Pressed
Visualización de un elemento de árbol deshabilitado
Disable

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

 

El elemento que sirve como menú tiene rol="menu". Los elementos contenidos en el menú son elementos hijos y tienen role="menuitem". Los elementos con role="menuitem" tienen el atributo aria-posinset, que define el número o la posición de un elemento en el conjunto actual de listitems cuando no todos los elementos están presentes en el DOM. Cada elemento del menú tiene tabindex=0 y aria-hidden establecida en false cuando son visibles. Si el elemento está deshabilitado tiene la propiedad aria-disabled a true. Si el elemento está deshabilitado se puede añadir un texto descriptivo que acompañará a un componente tooltip, con la propiedad aria-describedby