Tree
Nested details with chevrons and indent guides. For files, folders and anything hierarchical.
Examples
Tree
src
components
- aequitas.css
- README.md
Anatomy
ul.tree | The root list, unstyled. |
li > details > summary | A branch. The summary gets a chevron that turns when open. |
details > ul | The branch's children, indented with a hairline guide. |
li > a, li > span | A leaf: a link, or a span for something not navigable. |
API
| Attribute | Values | Description |
|---|---|---|
aria-current | boolean | On a leaf link: accent text, tint and an accent edge. Use page for navigation, true for a selection. |
open | boolean | On a <details>: the branch starts expanded. |
Accessibility
- This is nested disclosures, not an ARIA
tree: there is no arrow-key navigation, and each summary announces its own expanded state. - Don't add
role="tree"without scripting the tree keyboard pattern to go with it. - Wrap it in a labelled
<nav>when it is site navigation.
| Key | Effect |
|---|---|
| Enter / Space | On a summary: opens or closes the branch (native). |
| Tab / ShiftTab | Moves through summaries and links in order. |