NavigationMenu

NavigationMenu displays a list of links and dropdowns with an overlay viewport and an animated indicator. It integrates with the sl styling system for consistent theming.

Demo

Usage

TypeScript

// Видимите текстове на английски; коментарите на български.
import React from 'react';
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
} from '@libdev-ui/base';

export default function Example() {
  const [value, setValue] = React.useState<string | null>(null); 

  return (
    <NavigationMenu.Root value={value} onValueChange={setValue} orientation="horizontal" openDelay={0} closeDelay={140}>
      <NavigationMenu.List>
        <NavigationMenuItem value="home">
          <NavigationMenuLink href="#home" active={value === 'home'}>Home</NavigationMenuLink>
        </NavigationMenuItem>

        <NavigationMenuItem value="docs">
          <NavigationMenuTrigger>Docs</NavigationMenuTrigger>
          <NavigationMenuContent>
            <a href="#getting-started">Getting started</a>
            <a href="#components">Components</a>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenu.List>
      <NavigationMenu.Viewport />
      <NavigationMenu.Indicator />
    </NavigationMenu.Root>
  );
}

JavaScript

import React from 'react';
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
} from '@libdev-ui/base';

export default function Example() {
  const [value, setValue] = React.useState(null); 

  return (
    <NavigationMenu.Root value={value} onValueChange={setValue} orientation="horizontal" openDelay={0} closeDelay={140}>
      <NavigationMenu.List>
        <NavigationMenuItem value="home">
          <NavigationMenuLink href="#home" active={value === 'home'}>Home</NavigationMenuLink>
        </NavigationMenuItem>

        <NavigationMenuItem value="docs">
          <NavigationMenuTrigger>Docs</NavigationMenuTrigger>
          <NavigationMenuContent>
            <a href="#getting-started">Getting started</a>
            <a href="#components">Components</a>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenu.List>
      <NavigationMenu.Viewport />
      <NavigationMenu.Indicator />
    </NavigationMenu.Root>
  );
}

Props

NavigationMenu.Root

Prop	Type	Default	Description
value	string | null		Controlled active item
defaultValue	string | null	null	Uncontrolled initial value
onValueChange	(value: string | null) => void		Called when active item changes
orientation	'horizontal' | 'vertical'	'horizontal'	Layout orientation
openDelay	number	0	Delay before opening on hover
closeDelay	number	140	Delay before closing on leave
reopenSkipDelay	number	300	Grace period between triggers
animationPreset	'slide' | 'fade' | 'scale' | 'smart'	'smart'	Animation style
reducedMotionMode	'auto' | 'force-reduced'	'auto'	Motion preference
viewportAlign	'start' | 'center' | 'end'	'start'	Alignment of viewport under trigger
sl	SlProp		System styles

NavigationMenu.List

Prop	Type	Default
role	string	'navigation'
sl	SlProp

NavigationMenuItem

Prop	Type	Default
value	string	auto-generated
disabled	boolean	false
sl	SlProp

NavigationMenuTrigger

Prop	Type	Default
active	boolean	false
disabled	boolean	false
sl	SlProp

NavigationMenuContent

Prop	Type	Default
forceMount	boolean	false
sl	SlProp

NavigationMenu.Indicator

Prop	Type	Default
forceMount	boolean	false
motionProps	MotionProps
sl	SlProp

NavigationMenu.Viewport

Prop	Type	Default
forceMount	boolean	true
viewportAlign	'start' | 'center' | 'end'	'start'
sl	SlProp

Troubleshooting

• If the demo does not open on first hover, ensure the viewport is not clipped by a parent container (overflow: hidden), and that the root wrapper has position: relative while the viewport uses position: absolute.
• In Docusaurus, using <BrowserOnly> avoids SSR hydration issues for interactive demos.