NavigationItem

Use NavigationItem

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

"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