# NavigationItem

One shared navigation row for destinations, commands and independent disclosure.

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

export function Example() {
  return (
    <FloodRoot>
      <NavigationItem label="Projects" href="/projects" current />
    </FloodRoot>
  );
}
```

## Design notes

- Uses Flood Link or Button; navigation links remain native anchors with host handlers. Commands and destination clicks do not silently toggle a branch.
- disclosure without a destination makes the complete row a disclosure button. href plus disclosure creates separate link and disclosure targets in one shared surface; expanded is controlled by the host.
- compact leaf rows retain names through Tooltip. Use NavigationTree for compact branches and link-plus-branch items so the full navigation remains reachable in a Popover.
- IconSlot owns leading artwork; IconButton keeps the disclosure target with smaller supporting artwork. trailing is noninteractive metadata, not a place to nest another button inside a link.
- trailingAction is an independent sibling control in expanded rows. It is visible alongside any trailing metadata. Use a named IconButton and apply its own disabled state.
- Original compatible addition in the unpublished 0.2.11 source candidate.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `Required` |
| `description` | `string` | `—` |
| `icon` | `ReactNode` | `—` |
| `reserveIcon` | `boolean` | `—` |
| `trailing` | `ReactNode` | `—` |
| `trailingAction` | `ReactNode` | `—` |
| `href` | `string` | `—` |
| `linkProps` | `Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' \| 'children' \| 'aria-current'>` | `—` |
| `onAction` | `()=>void` | `—` |
| `actionProps` | `Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>` | `—` |
| `disclosure` | `NavigationItemDisclosure` | `—` |
| `current` | `boolean` | `—` |
| `currentKind` | `'page' \| 'location'` | `—` |
| `ancestorCurrent` | `boolean` | `—` |
| `disabled` | `boolean` | `—` |
| `size` | `'sm' \| 'md' \| 'lg'` | `—` |
| `compact` | `boolean` | `—` |
| `variant` | `'quiet' \| 'standard'` | `—` |
| `tooltip` | `boolean` | `—` |
| `tooltipSide` | `'left' \| 'right'` | `—` |
| `controlRef` | `Ref<HTMLElement>` | `—` |
| `disclosureRef` | `Ref<HTMLButtonElement>` | `—` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, 'children' \| 'onChange'>` | `Forwarded` |