NavigationTree

Use NavigationTree

NavigationTree is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, NavigationTree } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <NavigationTree label="Documentation" defaultExpandedValues={["start"]} items={[{value:"start",label:"Getting started",children:[{value:"installation",label:"Installation",href:"/docs/installation"}]}]} />
    </FloodRoot>
  );
}

Design notes

• Native nav, lists and anchors preserve ordinary Tab order and browser modifier navigation. This component does not use ARIA tree/menu/tab roles.
• A branch may have both href and children: its native link navigates while a separate disclosure button expands. currentValue marks the matching destination; ancestors are expanded explicitly by the host.
• Expansion is controlled or uncontrolled through expandedValues/defaultExpandedValues/onExpandedValuesChange. Translate disclosure names with expandLabel; content can render host-owned loading or empty branch content.
• Item values must be globally unique and children acyclic. Disabled destinations have no active href; parent disability does not propagate to children. Introduced in 0.2.7.

API reference