# NavigationGroup

Related navigation with optional headings, section actions, separators and 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, NavigationGroup, NavigationItem } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <NavigationGroup label="Projects">
        <NavigationItem label="Design system" href="/projects/design" />
        <NavigationItem label="Website" href="/projects/website" />
      </NavigationGroup>
    </FloodRoot>
  );
}
```

## Design notes

- Groups related navigation without inventing routes or application-menu semantics. Compose actual NavigationItem destinations or NavigationTree children.
- label, hideLabel, headingAction and separator are independent optional presentation choices. Keep headings and separators only when they clarify real relationships.
- collapsible uses Flood Collapsible and independent expanded/defaultExpanded/onExpandedChange state; an unaccepted request does not hide accepted content.
- Compact mode keeps destinations reachable while removing redundant heading text; compare section actions and body rows on the same rail axis.
- Original compatible addition in the unpublished 0.2.11 source candidate.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `—` |
| `hideLabel` | `boolean` | `—` |
| `headingAction` | `ReactNode` | `—` |
| `separator` | `boolean` | `—` |
| `collapsible` | `boolean` | `—` |
| `expanded` | `boolean` | `—` |
| `defaultExpanded` | `boolean` | `—` |
| `onExpandedChange` | `(expanded: boolean) => void` | `—` |
| `compact` | `boolean` | `—` |
| `size` | `"sm" \| "md" \| "lg"` | `—` |
| `collapseDisabled` | `boolean` | `—` |
| `children` | `ReactNode` | `—` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "title" \| "onChange">` | `Forwarded` |