# NavigationTree

Nested native navigation links with separate disclosure controls.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, NavigationTree } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <NavigationTree label="Documentation" defaultExpandedValues={["start"]} items={[{value:"start",label:"Getting started",children:[{value:"installation",label:"Installation",href:"/docs/installation"}]}]} />
    </FloodRoot>
  );
}
```

## Design notes

- Native nav, lists and anchors preserve ordinary Tab order and browser modifier navigation. This component does not use ARIA tree/menu/tab roles.
- A branch may have both href and children: its native link navigates while a separate disclosure button expands. currentValue marks the matching destination; ancestors are expanded explicitly by the host.
- Expansion is controlled or uncontrolled through expandedValues/defaultExpandedValues/onExpandedValuesChange. Translate disclosure names with expandLabel; content can render host-owned loading or empty branch content.
- Item values must be globally unique and children acyclic. Disabled destinations have no active href; parent disability does not propagate to children. Introduced in 0.2.7.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `Required` |
| `items` | `readonly NavigationTreeItem[]` | `Required` |
| `currentValue` | `string` | `—` |
| `expandedValues` | `readonly string[]` | `—` |
| `defaultExpandedValues` | `readonly string[]` | `—` |
| `onExpandedValuesChange` | `(values: string[]) => void` | `—` |
| `expandLabel` | `(item: NavigationTreeItem, expanded: boolean) => string` | `—` |
| `size` | `"sm" \| "md" \| "lg"` | `—` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLElement>, "children" \| "onChange">` | `Forwarded` |