navigation-menu

Horizontal site navigation with hover-intent panels and an optional shared viewport.

Implements the WAI-ARIA disclosure navigation pattern: a row of triggers that open rich panel content with hover-intent timing and keyboard support.

Installation

pnpm add @fluixi/navigation-menu

Usage

import {
  NavigationMenu, NavigationMenuList, NavigationMenuItem,
  NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink,
  NavigationMenuViewport, NavigationMenuIndicator,
} from '@fluixi/navigation-menu';

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem value="products">
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/analytics">Analytics</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem value="docs">
      <NavigationMenuTrigger>Docs</NavigationMenuTrigger>
      <NavigationMenuContent>…</NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuIndicator />
  </NavigationMenuList>
  <NavigationMenuViewport />
</NavigationMenu>

Parts

Part	Description
`NavigationMenu`	Root `<nav>`. `delayDuration` (hover-open ms, default 200), `closeDelay` (ms, default 300), `orientation`.
`NavigationMenuList`	`<ul>` of menu items.
`NavigationMenuItem`	A single item with a required `value`.
`NavigationMenuTrigger`	Button that opens the content panel on hover or click. Roving tabindex.
`NavigationMenuContent`	The panel. Floats under its trigger without a viewport; teleports into the viewport when one is present.
`NavigationMenuLink`	An `<a>` that closes the menu on click. `active` marks it as current.
`NavigationMenuViewport`	Optional shared surface: all panels teleport into it, which enables morphing size transitions.
`NavigationMenuIndicator`	An arrow that tracks the active trigger position.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.

Examples

navigation-menu

Installation

Usage

Parts