Skip to content
← Inventory

NavigationMenu

Horizontal site navigation whose entries can open dropdown panels of links or rich content. Wraps Radix NavigationMenu Root; compose with NavigationMenuList and NavigationMenuItem. Which entry is open is uncontrolled by default; pass value/onValueChange to control it.

Usage

import { NAVIGATION_MENU_TRIGGER_CLASSES, NavigationMenu, navigationMenuAnatomy, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuViewport } from "@desk/ui/components/navigation-menu";

Best practices

  • Reserve NavigationMenu for site/section navigation with panels; a click actions menu is DropdownMenu, a desktop app menu bar is Menubar, and simple in-page routed tabs are TabNavigation.

  • Keep it uncontrolled unless you must drive it; leave viewport on (the shared animated surface) unless you specifically want each panel to render inline beneath its trigger.

Props

PropTypeDefaultDescription
viewportbooleantrue

Render the shared animated Viewport surface that hosts open panels. Set false to render each item's content inline below its trigger instead.

Also exports

  • constNAVIGATION_MENU_TRIGGER_CLASSES
  • constnavigationMenuAnatomy
  • componentNavigationMenuContent
  • componentNavigationMenuIndicator
  • componentNavigationMenuItem
  • componentNavigationMenuLink
  • componentNavigationMenuList
  • componentNavigationMenuTrigger
  • constnavigationMenuTriggerStyle
  • componentNavigationMenuViewport

Anatomy

NavigationMenu

navigation-menu

Horizontal site navigation with dropdown panels

NavigationMenuList

navigation-menu-list

Horizontal row of navigation entries

NavigationMenuItem

navigation-menu-item

A single top-level entry

NavigationMenuTrigger

navigation-menu-trigger

Pill button opening a menu panel

NavigationMenuContent

navigation-menu-content

Panel of links / rich content

NavigationMenuLink

navigation-menu-link

Link inside a panel

NavigationMenuLink

navigation-menu-link

Top-level link (no panel)

NavigationMenuIndicator

navigation-menu-indicator

Arrow pointing at the active trigger

NavigationMenuViewport

navigation-menu-viewport

Shared animated surface hosting the open panel

Composition

Builds on

Icon