NavigationGroup

Use NavigationGroup

Related navigation with optional headings, section actions, separators and disclosure.

"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