# Tree

> Nested lists of folders and links that open in place, for file browsers and deep navigation.

## Anatomy

Use a `<ul class="tree">` of nested lists for file browsers and deep navigation. Each branch is a `<details>`, and its `<summary>` is the row. Each leaf is a link.

Mark the current row with `aria-current`. Each level draws a guide line down from its parent's chevron. Wrap a tree of links in a named `<nav>`.

-   src
    
    -   [index.ts](#anatomy)
    -   components
        
        -   [menu.ts](#anatomy)
        -   [tabs.ts](#anatomy)
        
    -   core
        
        -   [utils.ts](#anatomy)
        
    
-   [README.md](#anatomy)

```
<nav aria-label="Files">
  <ul class="tree">
    <li>
      <details open>
        <summary>src</summary>
        <ul>
          <li><a href="/src/index.ts" aria-current="page">index.ts</a></li>
          <li>
            <details>
              <summary>components</summary>
              <ul>
                <li><a href="/src/components/menu.ts">menu.ts</a></li>
              </ul>
            </details>
          </li>
        </ul>
      </details>
    </li>
    <li><a href="/README.md">README.md</a></li>
  </ul>
</nav>
```

## Keyboard

The rows are native disclosures and links, so every row is a Tab stop and Enter or Space opens a branch. Don't add `role="tree"`. That role promises arrow-key navigation between rows, and native disclosures don't provide it.

## Tokens

Override these on the `.tree`.

| Token | Default |
| --- | --- |
| `--md-comp-tree-row-height` | 40px |
| `--md-comp-tree-row-shape` | 100px |
| `--md-comp-tree-guide-color` | `--md-sys-color-outline-variant` |
| `--md-comp-tree-selected-container-color` | `--md-sys-color-secondary-container` |