# Tree: Navigation

> Render rows as links with `render`. Pass the current page to `selectedValues`, open its section, and set `aria-current` on its row.

Example: https://hextaui.com/docs/tree/examples/navigation
Component docs: https://hextaui.com/docs/tree.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/tree-navigation.json
```

This adds `components/examples/tree/navigation.tsx` with the Tree component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/tree/navigation.tsx"
import Link from "next/link"

import { Tree, TreeGroup, TreeItem, TreeItemLabel } from "@/components/ui/tree"

const sections = [
  {
    value: "getting-started",
    title: "Getting started",
    pages: [{ value: "installation", title: "Installation" }],
  },
  {
    value: "components",
    title: "Components",
    pages: [
      { value: "accordion", title: "Accordion" },
      { value: "collapsible", title: "Collapsible" },
      { value: "tabs", title: "Tabs" },
      { value: "tree", title: "Tree" },
    ],
  },
]

const current = "tree"

export function TreeNavigation() {
  return (
    <nav aria-label="Docs" className="w-full max-w-60">
      <Tree
        aria-label="Docs pages"
        size="sm"
        selectedValues={[current]}
        defaultExpandedValues={["components"]}
      >
        {sections.map((section) => (
          <TreeItem key={section.value} value={section.value}>
            <TreeItemLabel>{section.title}</TreeItemLabel>
            <TreeGroup>
              {section.pages.map((page) => (
                <TreeItem key={page.value} value={page.value}>
                  <TreeItemLabel
                    render={<Link href={`/docs/${page.value}`} />}
                    aria-current={page.value === current ? "page" : undefined}
                  >
                    {page.title}
                  </TreeItemLabel>
                </TreeItem>
              ))}
            </TreeGroup>
          </TreeItem>
        ))}
      </Tree>
    </nav>
  )
}
```

## Props in this example

### Tree

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `"default" \| "sm"` | `"default"` |  |
| `selectedValues` | `string[]` | – |  |
| `defaultExpandedValues` | `string[]` | – |  |

### TreeItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | – | Required. Unique within the tree. |

### TreeItemLabel

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<div>` |  |

## More Tree examples

- [Indent guides](https://hextaui.com/docs/tree/examples/lines.md)
- [Connectors](https://hextaui.com/docs/tree/examples/connectors.md)
- [Checkboxes](https://hextaui.com/docs/tree/examples/checkboxes.md)
- [Multiple selection](https://hextaui.com/docs/tree/examples/multiple.md)
- [Controlled](https://hextaui.com/docs/tree/examples/controlled.md)
- [Lazy loading](https://hextaui.com/docs/tree/examples/lazy.md)
- [Small](https://hextaui.com/docs/tree/examples/small.md)
- [Disabled](https://hextaui.com/docs/tree/examples/disabled.md)
- [Long names](https://hextaui.com/docs/tree/examples/long-names.md)
- [Right to left](https://hextaui.com/docs/tree/examples/rtl.md)