Government of Spain Dintel Standardized Design of Electronic Procedures Start First steps Foundations Components Modules Templates Tokens Support

Tree

The tree is a visualization of a hierarchical structure. Each level can be expanded, see its sublevels and be able to navigate by clicking on them.

Preview

Figma
Preview tree of content

Uses

When to use

To organize large amounts of information that can nest on multiple levels.

When not to use

When you only need a few levels of nested information. For this case it would be better to use the accordion. As main navigation in the interface of a product.

Behaviour

Type

Graphical representation of a level element with drop-down elements
Drop-down: It is used when you have levels below in the hierarchy.
Graphical representation of a level element without drop-down elements
Navigable: It is used when you do not have levels below in the hierarchy.

State

Display of a tree element by default
Default
Display of an open tree element
Open
Display of a tree element in hover state
Hover
Display of a tree element with focus
Focus
Display of a pressed tree element
Pressed
Display of a disabled tree element
Disable

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

The item that serves as a menu has role="menu". The items contained in the menu are children items and have role="menuitem". Elements with role="menuitem" have the aria-posinset attribute, which defines the number or position of an element in the current set of listitems when not all elements are present in the DOM. Each menu item has tabindex=0 and aria-hidden set to false when they are visible. If the item is disabled it has the aria-disabled property to true. If the element is disabled, a descriptive text can be added that will accompany a tooltip component, with the aria-describedby property