<NavigationMenu aria-label="Main">
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>
        Products
        <NavigationMenuIcon />
      </NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid w-50 gap-1">
          <li>
            <NavigationMenuLink href="/analytics">Analytics</NavigationMenuLink>
          </li>
          <li>
            <NavigationMenuLink href="/ui/components">Components</NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/pricing" className="w-auto">
        Pricing
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

NavigationMenu is a compound component built on Base UI's Navigation Menu. The root coordinates the bar and shares variant, size, orientation, and the trigger icon with every item. The single popup morphs — moving and resizing — between items as you hover across the bar:

NavigationMenuList — the row (or column) of items.
NavigationMenuItem — wraps one entry: a trigger + content, or a single link.
NavigationMenuTrigger — the label that opens an item's panel on hover or focus.
NavigationMenuIcon — the trigger's open/close indicator; flips while open. Override its kind per-trigger or drop it with icon={false} on the root.
NavigationMenuContent — the panel for a trigger. Lay your links out inside it however you like — a list, a grid, a featured card.
NavigationMenuLink — a link, both inside a panel and as a standalone top-level item (give it className="w-auto" so it sizes to its label in the bar).
NavigationMenuViewport — the surface a panel renders into. The root renders one automatically; render your own only for inline submenus.
NavigationMenuPositioner — the portalled, auto-positioned wrapper around the popup. Rendered automatically; pass viewport={false} on the root to opt out.

Reach for a NavigationMenu for marketing-style site navigation with multi-column panels and descriptions. For a single menu of actions opened from a button, use a Dropdown Menu; for an application command bar (File / Edit / View), use a Menubar; for a flat row of section links, use Navigation.

Examples

Default

A bar with two panel-opening items and one plain link. Each panel is just markup inside NavigationMenuContent — here a grid of NavigationMenuLink cards with an icon, a title, and a description. The popup morphs to fit whichever panel is open.

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuIcon,
  NavigationMenuContent,
  NavigationMenuLink,
} from '@appica/ui-react/navigation-menu'
import { DeviceDesktopAnalytics2, Cube, Bolt, Book, Code, Lifebuoy } from '@appica/icons-react'

const PRODUCTS = [
  { title: 'Analytics', description: 'Track usage and conversions in real time.', Icon: DeviceDesktopAnalytics2 },
  { title: 'Components', description: 'A composable library of UI primitives.', Icon: Cube },
  { title: 'Automation', description: 'Wire up workflows without code.', Icon: Bolt },
  { title: 'Integrations', description: 'Connect the tools your team already uses.', Icon: Code },
]

const RESOURCES = [
  { title: 'Documentation', description: 'Guides and API references.', Icon: Book },
  { title: 'Support', description: 'Reach our team for help.', Icon: Lifebuoy },
]

export default function NavigationMenuDefault() {
  return (
    <NavigationMenu aria-label="Main">
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>
            Products
            <NavigationMenuIcon />
          </NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-96 grid-cols-2 gap-0.5">
              {PRODUCTS.map(({ title, description, Icon }) => (
                <li key={title}>
                  <NavigationMenuLink href="#!" className="h-auto flex-col items-start gap-1 whitespace-normal">
                    <span className="text-foreground-intense flex items-center gap-1.5 font-medium">
                      <Icon />
                      {title}
                    </span>
                    <span className="text-foreground-muted text-xs font-normal">{description}</span>
                  </NavigationMenuLink>
                </li>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>

        <NavigationMenuItem>
          <NavigationMenuTrigger>
            Resources
            <NavigationMenuIcon />
          </NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="w-50 gap-0.5">
              {RESOURCES.map(({ title, description, Icon }) => (
                <li key={title}>
                  <NavigationMenuLink href="#!" className="h-auto flex-col items-start gap-1 whitespace-normal">
                    <span className="text-foreground-intense flex items-center gap-1.5 font-medium">
                      <Icon />
                      {title}
                    </span>
                    <span className="text-foreground-muted text-xs font-normal">{description}</span>
                  </NavigationMenuLink>
                </li>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>

        <NavigationMenuItem>
          <NavigationMenuLink href="#!">Pricing</NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}

Variants

variant styles the triggers: pill (default) gives each a hover/active background, while line draws an animated underline.

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuIcon,
  NavigationMenuContent,
  NavigationMenuLink,
} from '@appica/ui-react/navigation-menu'

const LINKS = ['Overview', 'Changelog', 'Roadmap', 'Releases']

function Menus() {
  return (
    <>
      <NavigationMenuItem>
        <NavigationMenuTrigger>
          Product
          <NavigationMenuIcon />
        </NavigationMenuTrigger>
        <NavigationMenuContent>
          <ul className="w-50 gap-0.5">
            {LINKS.map((label) => (
              <li key={label}>
                <NavigationMenuLink href="#!">{label}</NavigationMenuLink>
              </li>
            ))}
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink href="#!">Pricing</NavigationMenuLink>
      </NavigationMenuItem>
    </>
  )
}

export default function NavigationMenuVariants() {
  return (
    <div className="flex flex-col gap-8">
      <NavigationMenu aria-label="Pill" variant="pill">
        <NavigationMenuList>
          <Menus />
        </NavigationMenuList>
      </NavigationMenu>

      <NavigationMenu aria-label="Line" variant="line">
        <NavigationMenuList>
          <Menus />
        </NavigationMenuList>
      </NavigationMenu>
    </div>
  )
}

Sizes

size on the root scales the triggers, popup radius, and link padding together — sm, md (default), or lg.

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuIcon,
  NavigationMenuContent,
  NavigationMenuLink,
} from '@appica/ui-react/navigation-menu'

const SIZES = ['sm', 'md', 'lg'] as const

const LINKS = ['Overview', 'Analytics', 'Settings']

export default function NavigationMenuSizes() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      {SIZES.map((size) => (
        <NavigationMenu key={size} aria-label={size} size={size}>
          <NavigationMenuList>
            <NavigationMenuItem>
              <NavigationMenuTrigger>
                {size}
                <NavigationMenuIcon />
              </NavigationMenuTrigger>
              <NavigationMenuContent>
                <ul className="w-50 gap-0.5">
                  {LINKS.map((label) => (
                    <li key={label}>
                      <NavigationMenuLink href="#!">{label}</NavigationMenuLink>
                    </li>
                  ))}
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>
      ))}
    </div>
  )
}

Indicator

icon on the root sets the open/close indicator next to every trigger: a chevron (default), a caret, or a plus that morphs into a minus. Set icon={false} to drop it, or override a single trigger by passing icon to its NavigationMenuIcon.

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuIcon,
  NavigationMenuContent,
  NavigationMenuLink,
} from '@appica/ui-react/navigation-menu'

const KINDS = ['chevron', 'caret', 'plus'] as const

const LINKS = ['Dashboard', 'Reports', 'Settings']

export default function NavigationMenuIcons() {
  return (
    <div className="flex flex-wrap gap-6">
      {KINDS.map((kind) => (
        <NavigationMenu key={kind} aria-label={kind} icon={kind}>
          <NavigationMenuList>
            <NavigationMenuItem>
              <NavigationMenuTrigger>
                {kind}
                <NavigationMenuIcon />
              </NavigationMenuTrigger>
              <NavigationMenuContent>
                <ul className="w-50 gap-0.5">
                  {LINKS.map((label) => (
                    <li key={label}>
                      <NavigationMenuLink href="#!">{label}</NavigationMenuLink>
                    </li>
                  ))}
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>
      ))}
    </div>
  )
}

Vertical

Set orientation="vertical" to stack the bar into a sidebar; each panel opens to the inline-end side. Give triggers w-full justify-start and push the indicator to the edge with ms-auto.

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuIcon,
  NavigationMenuContent,
  NavigationMenuLink,
} from '@appica/ui-react/navigation-menu'
import { LayoutDashboard, Folder, Users } from '@appica/icons-react'

const MENUS = [
  { label: 'Dashboard', Icon: LayoutDashboard, links: ['Summary', 'Activity', 'Insights'] },
  { label: 'Projects', Icon: Folder, links: ['All projects', 'Archived', 'Templates'] },
  { label: 'Team', Icon: Users, links: ['Members', 'Roles', 'Invitations'] },
]

export default function NavigationMenuVertical() {
  return (
    <NavigationMenu aria-label="Sidebar" orientation="vertical" className="w-48">
      <NavigationMenuList>
        {MENUS.map(({ label, Icon, links }) => (
          <NavigationMenuItem key={label}>
            <NavigationMenuTrigger className="w-full justify-start">
              <Icon data-icon="start" />
              {label}
              <NavigationMenuIcon className="ms-auto" />
            </NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="w-48 gap-0.5">
                {links.map((link) => (
                  <li key={link}>
                    <NavigationMenuLink href="#!">{link}</NavigationMenuLink>
                  </li>
                ))}
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
        ))}
      </NavigationMenuList>
    </NavigationMenu>
  )
}

Backdrop

Set backdrop to dim and blur the page behind the open panel — useful for a prominent mega-menu that should pull focus away from the page.

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuIcon,
  NavigationMenuContent,
  NavigationMenuLink,
} from '@appica/ui-react/navigation-menu'

const PRODUCTS = [
  { title: 'Analytics', description: 'Track usage and conversions.' },
  { title: 'Components', description: 'A composable UI library.' },
  { title: 'Automation', description: 'Wire up workflows fast.' },
  { title: 'Integrations', description: 'Connect your stack.' },
]

export default function NavigationMenuBackdrop() {
  return (
    <NavigationMenu aria-label="Main" backdrop>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>
            Products
            <NavigationMenuIcon />
          </NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-94 grid-cols-2 gap-0.5">
              {PRODUCTS.map(({ title, description }) => (
                <li key={title}>
                  <NavigationMenuLink href="#!" className="h-auto flex-col items-start gap-1 whitespace-normal">
                    <span className="text-foreground-intense font-medium">{title}</span>
                    <span className="text-foreground-muted text-xs font-normal">{description}</span>
                  </NavigationMenuLink>
                </li>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="#!">Pricing</NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}

Nested submenus

Open a deeper level in its own panel by nesting a second NavigationMenu (set orientation="vertical") inside a NavigationMenuContent. The nested menu renders its own portalled popup, opening to the side of the parent panel — just like a submenu.

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuIcon,
  NavigationMenuContent,
  NavigationMenuLink,
} from '@appica/ui-react/navigation-menu'

const COMPANY = [
  { title: 'About', description: 'Our mission and the team behind it.' },
  { title: 'Careers', description: 'Open roles across the company.' },
  { title: 'Blog', description: 'Product news and engineering notes.' },
]

const HANDBOOK = [
  { title: 'Getting started', description: 'Set up your workspace.' },
  { title: 'Principles', description: 'How we make decisions.' },
  { title: 'Remote work', description: 'Working across time zones.' },
]

export default function NavigationMenuNestedSubmenus() {
  return (
    <NavigationMenu aria-label="Main">
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>
            Company
            <NavigationMenuIcon />
          </NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="w-58 gap-0.5">
              {COMPANY.map(({ title, description }) => (
                <li key={title}>
                  <NavigationMenuLink href="#!" className="h-auto flex-col items-start gap-1 whitespace-normal">
                    <span className="text-foreground-intense font-medium">{title}</span>
                    <span className="text-foreground-muted text-xs font-normal">{description}</span>
                  </NavigationMenuLink>
                </li>
              ))}
              <li>
                <NavigationMenu orientation="vertical">
                  <NavigationMenuList className="w-full">
                    <NavigationMenuItem className="w-full">
                      <NavigationMenuTrigger className="h-auto w-full whitespace-normal">
                        <span className="flex min-w-0 flex-1 flex-col items-start gap-0.5">
                          <span className="text-foreground-intense font-medium">Handbook</span>
                          <span className="text-foreground-muted text-xs font-normal">
                            How the team works, day to day.
                          </span>
                        </span>
                        <NavigationMenuIcon />
                      </NavigationMenuTrigger>
                      <NavigationMenuContent>
                        <ul className="w-50 gap-0.5">
                          {HANDBOOK.map(({ title, description }) => (
                            <li key={title}>
                              <NavigationMenuLink
                                href="#!"
                                className="h-auto flex-col items-start gap-1 whitespace-normal"
                              >
                                <span className="text-foreground-intense font-medium">{title}</span>
                                <span className="text-foreground-muted text-xs font-normal">{description}</span>
                              </NavigationMenuLink>
                            </li>
                          ))}
                        </ul>
                      </NavigationMenuContent>
                    </NavigationMenuItem>
                  </NavigationMenuList>
                </NavigationMenu>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>

        <NavigationMenuItem>
          <NavigationMenuLink href="#!">Pricing</NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}

Nested inline submenus

To switch panels within the same popup — a sidebar of categories beside a detail pane — nest a NavigationMenu with viewport={false} and render your own NavigationMenuViewport next to its list. Use defaultValue to open one category on mount, and give each NavigationMenuItem a value so the list can drive the shared viewport.

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuIcon,
  NavigationMenuContent,
  NavigationMenuLink,
  NavigationMenuViewport,
} from '@appica/ui-react/navigation-menu'

const AUDIENCES = [
  {
    value: 'developers',
    label: 'Developers',
    hint: 'Build and ship faster',
    title: 'For developers',
    description: 'APIs, SDKs, and primitives to integrate in minutes.',
    links: [
      { title: 'API reference', description: 'Every endpoint, documented.' },
      { title: 'SDKs', description: 'First-party libraries for your stack.' },
      { title: 'Examples', description: 'Copy-paste starting points.' },
    ],
  },
  {
    value: 'designers',
    label: 'Designers',
    hint: 'Design with the system',
    title: 'For designers',
    description: 'Tokens, kits, and guidelines that match the code.',
    links: [
      { title: 'Figma kit', description: 'Components mapped to production.' },
      { title: 'Design tokens', description: 'One source of truth for theming.' },
      { title: 'Guidelines', description: 'Patterns and accessibility notes.' },
    ],
  },
  {
    value: 'teams',
    label: 'Teams',
    hint: 'Scale across the org',
    title: 'For teams',
    description: 'Roles, governance, and shared workspaces.',
    links: [
      { title: 'Permissions', description: 'Granular role-based access.' },
      { title: 'Audit log', description: 'Track every change.' },
      { title: 'SSO', description: 'Single sign-on for everyone.' },
    ],
  },
]

const cardClass = 'h-auto flex-col items-start gap-0.5 whitespace-normal'

export default function NavigationMenuNestedInline() {
  return (
    <NavigationMenu aria-label="Main">
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>
            Product
            <NavigationMenuIcon />
          </NavigationMenuTrigger>
          <NavigationMenuContent className="p-0">
            <NavigationMenu orientation="vertical" defaultValue="developers" viewport={false}>
              <div className="grid w-125 grid-cols-[13rem_minmax(0,1fr)]">
                <NavigationMenuList className="border-border w-full flex-col items-stretch gap-1 border-e p-2">
                  {AUDIENCES.map((menu) => (
                    <NavigationMenuItem key={menu.value} value={menu.value} className="w-full">
                      <NavigationMenuTrigger className={`w-full ${cardClass}`}>
                        <span className="text-foreground-intense font-medium">{menu.label}</span>
                        <span className="text-foreground-muted text-xs font-normal">{menu.hint}</span>
                      </NavigationMenuTrigger>
                      <NavigationMenuContent className="p-0">
                        <div className="flex flex-col gap-3 p-2">
                          <div className="px-3 pt-1">
                            <h4 className="text-foreground-intense m-0 font-semibold">{menu.title}</h4>
                            <p className="text-foreground-muted m-0 mt-0.5 text-sm">{menu.description}</p>
                          </div>
                          <ul className="grid gap-1">
                            {menu.links.map((link) => (
                              <li key={link.title}>
                                <NavigationMenuLink href="#!" className={cardClass}>
                                  <span className="text-foreground-emphasis font-medium">{link.title}</span>
                                  <span className="text-foreground-muted text-xs font-normal">{link.description}</span>
                                </NavigationMenuLink>
                              </li>
                            ))}
                          </ul>
                        </div>
                      </NavigationMenuContent>
                    </NavigationMenuItem>
                  ))}
                </NavigationMenuList>
                <NavigationMenuViewport className="min-h-60" />
              </div>
            </NavigationMenu>
          </NavigationMenuContent>
        </NavigationMenuItem>

        <NavigationMenuItem>
          <NavigationMenuLink href="#!">Pricing</NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}

RTL

Every Appica UI component supports right-to-left layouts out of the box. Set the dir attribute on a container (commonly your <html> element) so CSS logical properties resolve correctly, and wrap your tree in DirectionProvider so direction-aware behavior — roving focus along the bar, popup placement, and the morph direction — follows the same direction.

import { DirectionProvider } from '@appica/ui-react/providers/direction-provider'

export default function RootLayout({ children }) {
  return (
    <html lang="ar" dir="rtl">
      <body>
        <DirectionProvider dir="rtl">{children}</DirectionProvider>
      </body>
    </html>
  )
}

The bar lays out from the right, arrow-key focus reverses, the panel anchors from the trigger's leading edge, and a vertical menu's panels open toward the inline-start side. For setup details and caveats, see the RTL guide.

Scoped RTL needs the direction on the positioner

The popup portals to <body>, so its start/end alignment mirrors from the document direction (read from CSS, not from DirectionProvider) — automatic when <html dir="rtl">. If you instead scope RTL to a subtree of an LTR page, set dir="rtl" on the NavigationMenu root so the morphing panel still mirrors. See Floating popups in a scoped RTL region.

API reference

NavigationMenu wraps Base UI's Navigation Menu. Each part forwards every remaining prop to the matching Base UI primitive, so anything it accepts works here — the tables below list the Appica additions and the most common props. See the Base UI docs for the complete API.

Prop	Type	Default	Description
`variant`	`'pill' \| 'line'`	`'pill'`	Trigger appearance — hover/active pill, or an animated underline.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Scales triggers, popup radius, and link padding.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Lay the bar out as a row or a column.
`icon`	`'chevron' \| 'caret' \| 'plus' \| false`	`'chevron'`	The open/close indicator shown by each `NavigationMenuIcon`.
`morph`	`boolean`	`true`	Animate the popup's size and position between items.
`backdrop`	`boolean`	`false`	Render a dimmed, blurred backdrop behind the open panel.
`viewport`	`boolean`	`true`	Auto-render the portalled positioner + popup. Set `false` to render your own.
`sideOffset`	`number`	`6`	Gap between the trigger and the auto-rendered popup.
`value`	`any`	—	Controlled open item. Pair with `onValueChange`.
`defaultValue`	`any`	—	Uncontrolled initial open item.
`onValueChange`	`(value, eventDetails) => void`	—	Fires when the open item changes.
`delay`	`number`	`50`	Hover-open delay in ms.
`closeDelay`	`number`	`50`	Hover-close delay in ms.
`className`	`string`	—	Extra classes on the bar, merged via `tailwind-merge`.

NavigationMenuList

The row (or column) of items.

Prop	Type	Default	Description
`children`	`ReactNode`	—	The `NavigationMenuItem`s.
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

NavigationMenuItem

Wraps one entry — a trigger with content, or a single link.

Prop	Type	Default	Description
`value`	`any`	—	Identifies the item — required when driving an inline submenu.
`children`	`ReactNode`	—	A trigger + content pair, or a `NavigationMenuLink`.
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

NavigationMenuTrigger

The label that opens an item's panel. Inherits the root's variant, size, and orientation.

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Disable just this item.
`className`	`string`	—	Extra classes on the trigger, merged via `tailwind-merge`.

NavigationMenuIcon

The trigger's open/close indicator. Reads the root's icon kind; flips or morphs while the panel is open.

Prop	Type	Default	Description
`icon`	`'chevron' \| 'caret' \| 'plus' \| false`	root	Override the indicator for this trigger.
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

NavigationMenuContent

The panel for a trigger. Renders into the active viewport; lay your links out inside it freely.

Prop	Type	Default	Description
`children`	`ReactNode`	—	The panel's contents (lists, grids, cards).
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

NavigationMenuLink

A link — inside a panel or as a standalone bar item. Renders an <a>; use render to project it onto a router link. Forwards every native anchor prop (href, target, rel, …).

Prop	Type	Default	Description
`href`	`string`	—	Navigation target.
`active`	`boolean`	`false`	Mark the link as the current page.
`render`	`ReactElement \| (props, state) => ReactElement`	—	Render as your own element (e.g. a router `Link`).
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

NavigationMenuPositioner

The portalled, auto-positioned wrapper around the popup. Rendered automatically unless viewport={false}; render it yourself only for a fully custom popup.

Prop	Type	Default	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	bottom / inline-end	Preferred side to open on (vertical defaults to inline-end).
`sideOffset`	`number`	`6`	Gap between the trigger and the popup.
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Alignment along that side.
`alignOffset`	`number`	—	Shift along the alignment axis.
`collisionPadding`	`number`	—	Minimum gap kept from the viewport edge.
`container`	`HTMLElement \| ref \| null`	—	Portal target for the popup.

NavigationMenuViewport

The surface a panel renders into. The root renders one inside its popup automatically; render your own (with viewport={false}) only for an inline submenu.

Prop	Type	Default	Description
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

Accessibility

The bar renders a navigation landmark — give the root an aria-label. Triggers carry aria-expanded and own their panel via aria-controls.
↑/↓/←/→ move focus along the bar and into the open panel; Enter / Space open an item; Escape closes the panel back to its trigger; Tab moves through the panel's links.
Panels open on hover and on keyboard focus, so the menu is reachable without a pointer.
disabled triggers are skipped by keyboard navigation.
The morph, panel, and backdrop transitions are all skipped when the user prefers reduced motion.

Actions & Inputs

Data Display

Decoration & Effects

Layout

Menus

Navigation

Overlays

Status & Feedback

Navigation Menu

Usage