# Tree (UI SDK): Navigation

> Items with an `href` render as links. With `mode="none"` and `current`, the current page gets `aria-current`, its parents open and it takes the tab stop.

Canonical: https://hextaui.com/docs/ui-sdk-tree/examples/links

Component docs: https://hextaui.com/docs/ui-sdk-tree

## Add this example

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

This adds `components/examples/ui-sdk-tree/links.tsx` with the Tree component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/ui-sdk-tree/links.tsx"
"use client"

import * as React from "react"

import { Tree, type TreeItemData } from "@/components/ui/ui-sdk-tree"

const pages: TreeItemData[] = [
  {
    value: "getting-started",
    label: "Getting started",
    children: [
      { value: "introduction", label: "Introduction", href: "#introduction" },
      { value: "installation", label: "Installation", href: "#installation" },
    ],
  },
  {
    value: "components",
    label: "Components",
    children: [
      { value: "accordion", label: "Accordion", href: "#accordion" },
      { value: "dialog", label: "Dialog", href: "#dialog" },
      { value: "tree", label: "Tree", href: "#tree" },
    ],
  },
  { value: "changelog", label: "Changelog", href: "#changelog" },
]

function UiSdkTreeLinks() {
  const [current, setCurrent] = React.useState("tree")

  return (
    <Tree
      aria-label="Docs"
      items={pages}
      mode="none"
      current={current}
      onAction={(value, { event }) => {
        if (value === "getting-started" || value === "components") {
          return
        }
        event?.preventDefault()
        setCurrent(value)
      }}
      className="max-w-xs"
    />
  )
}

export { UiSdkTreeLinks }
```

## Props in this example

### Tree

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `TreeItemData[]` | – | The whole hierarchy. Without children, the tree renders styled rows from it. |
| `mode` | `"single" \| "multiple" \| "none"` | `"single"` |  |
| `onAction` | `(value, details) => unknown` | – | Runs on press or Enter. Return a promise to mark the item pending. |
| `current` | `string \| null` | – |  |

## More Tree examples

- [Items as data](https://hextaui.com/docs/ui-sdk-tree/examples/data)
- [File paths](https://hextaui.com/docs/ui-sdk-tree/examples/paths)
- [Multiple selection](https://hextaui.com/docs/ui-sdk-tree/examples/multiple)
- [Checkboxes](https://hextaui.com/docs/ui-sdk-tree/examples/checkboxes)
- [Loading children](https://hextaui.com/docs/ui-sdk-tree/examples/lazy)
- [Lines and small size](https://hextaui.com/docs/ui-sdk-tree/examples/lines)
- [Controller](https://hextaui.com/docs/ui-sdk-tree/examples/controller)
- [Find in page](https://hextaui.com/docs/ui-sdk-tree/examples/find-in-page)
- [Disabled](https://hextaui.com/docs/ui-sdk-tree/examples/disabled)
- [Right to left](https://hextaui.com/docs/ui-sdk-tree/examples/rtl)