# NavigationList

A grouped list of native navigation links with a clear current destination.

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, NavigationList } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <NavigationList label="Project navigation" currentValue="overview" items={[{value:"overview",label:"Overview",href:"/overview",group:"Workspace"},{value:"activity",label:"Activity",href:"/activity",group:"Workspace"},{value:"settings",label:"Settings",href:"/settings",group:"Manage"}]} />
    </FloodRoot>
  );
}
```

## Design notes

- NavigationList renders nav, lists and native anchors; it is not an ARIA menu or tablist. The host supplies unique stable item values, destinations and currentValue. Browser modifier/target navigation is preserved through item.linkProps.
- Optional group names label contiguous item groups. Icons are decorative IconSlot content; descriptions remain associated link text. Size controls compact row density while coarse pointer targets remain usable. No routing engine, URL inference or disabled navigation simulation is supplied.
- Original compatible addition in the unpublished 0.2.5 source candidate.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `Required` |
| `items` | `readonly NavigationListItem[]` | `Required` |
| `currentValue` | `string` | `—` |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLElement>, "children" \| "role" \| "aria-label">` | `Forwarded` |