import * as stylex from '@stylexjs/stylex';

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from '@/components/ui/navigation-menu';
import { space, fontSize, fontWeight, container } from '@/lib/constants.stylex';
import { colors } from '@/lib/tokens.stylex';

export default function NavigationMenuDemo() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <div {...stylex.props(styles.panel)}>
              <NavigationMenuLink href="#">
                <div {...stylex.props(styles.linkBody)}>
                  <span {...stylex.props(styles.linkTitle)}>Introduction</span>
                  <span {...stylex.props(styles.linkText)}>
                    Base UI + StyleX components you own.
                  </span>
                </div>
              </NavigationMenuLink>
              <NavigationMenuLink href="#">
                <div {...stylex.props(styles.linkBody)}>
                  <span {...stylex.props(styles.linkTitle)}>Installation</span>
                  <span {...stylex.props(styles.linkText)}>
                    Set up StyleX and install components via the CLI.
                  </span>
                </div>
              </NavigationMenuLink>
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
          <NavigationMenuContent>
            <div {...stylex.props(styles.panel)}>
              <NavigationMenuLink href="#">
                <div {...stylex.props(styles.linkBody)}>
                  <span {...stylex.props(styles.linkTitle)}>Button</span>
                  <span {...stylex.props(styles.linkText)}>
                    Variants, sizes, and render-prop composition.
                  </span>
                </div>
              </NavigationMenuLink>
              <NavigationMenuLink href="#">
                <div {...stylex.props(styles.linkBody)}>
                  <span {...stylex.props(styles.linkTitle)}>Dialog</span>
                  <span {...stylex.props(styles.linkText)}>
                    Modal dialogs with overlay and close button.
                  </span>
                </div>
              </NavigationMenuLink>
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="#">Docs</NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

const styles = stylex.create({
  panel: {
    display: 'flex',
    flexDirection: 'column',
    gap: space.s1,
    width: container.md,
  },
  linkBody: {
    display: 'flex',
    flexDirection: 'column',
    gap: space.s1,
  },
  linkTitle: {
    fontSize: fontSize.sm,
    fontWeight: fontWeight.medium,
  },
  linkText: {
    color: colors.mutedForeground,
    fontSize: fontSize.xs,
  },
});

Install

npx shadcn@latest add @madeui/navigation-menu

Usage

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from '@/components/ui/navigation-menu';

Composition

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger />
      <NavigationMenuContent />
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink />
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Link

A plain link item with no trigger or popup. active highlights the current page.

import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
} from '@/components/ui/navigation-menu';

// Plain links with no trigger or popup — `active` marks the current page.
export default function NavigationMenuLinkExample() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuLink href="#" active>
            Overview
          </NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="#">Integrations</NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="#">Pricing</NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

Built on Base UI Navigation Menu. NavigationMenu renders the shared popup (positioner + popup + viewport) itself — the popup morphs between panels as you move across triggers. All props are forwarded to the underlying Base UI parts; see the Base UI Navigation Menu API reference.

Prop	Type	Default	Description
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Popup alignment relative to the active trigger.
`style`	`StyleXStyles`	—	StyleX styles merged last — always win over the component’s own styles.