Import
{ ( NavigationMenu , NavigationMenuList , NavigationMenuItem , NavigationMenuTrigger , NavigationMenuContent , NavigationMenuLink , NavigationMenuIndicator , NavigationMenuViewport ) }{ " " } from '@strongtie/design-system/navigation-menu' ; ``` </Step> <Step title="Usage"> ``` jsx < NavigationMenu > < NavigationMenuList > < NavigationMenuItem > < NavigationMenuTrigger > Products </ NavigationMenuTrigger > < NavigationMenuContent > < NavigationMenuLink href = "/products/item1" > Item 1 </ NavigationMenuLink > </ NavigationMenuContent > </ NavigationMenuItem > </ NavigationMenuList > </ NavigationMenu > The value of the menu item that should be open when initially rendered.
The controlled value of the menu item to open.
Callback function that is called when the open state changes.
The duration from when the mouse enters a trigger until the content opens.
How much time a user has to enter another trigger without incurring a delay
again.
The reading direction of the navigation menu.
orientation
"horizontal" | "vertical"
default: "\"horizontal\""
The orientation of the navigation menu.
Whether to render the viewport component.
If true, the navigation menu list will render as a child component.
If true, the navigation menu item will render as a child component.
The unique value of the item.
If true, the navigation menu trigger will render as a child component.
If true, the navigation menu content will render as a child component.
onEscapeKeyDown
(event: KeyboardEvent) => void
Event handler called when the escape key is down.
onPointerDownOutside
(event: PointerDownOutsideEvent) => void
Event handler called when a pointer event happens outside of the component.
onFocusOutside
(event: FocusOutsideEvent) => void
Event handler called when focus moves outside of the component.
onInteractOutside
(event: PointerDownOutsideEvent | FocusOutsideEvent) => void
Event handler called when an interaction happens outside the component.
Used to force mounting when more control is needed.
If true, the navigation menu link will render as a child component.
Whether the link is active.
Event handler called when the link is selected.
If true, the navigation menu indicator will render as a child component.
Used to force mounting when more control is needed.
If true, the navigation menu viewport will render as a child component.
Used to force mounting when more control is needed.
Usage Examples Basic
With Simple Links
Complex Dropdown
With Indicator
Without Viewport
< NavigationMenu > < NavigationMenuList > < NavigationMenuItem > < NavigationMenuTrigger > Products </ NavigationMenuTrigger > < NavigationMenuContent > < NavigationMenuLink href = "/products/item1" > Item 1 </ NavigationMenuLink > < NavigationMenuLink href = "/products/item2" > Item 2 </ NavigationMenuLink > </ NavigationMenuContent > </ NavigationMenuItem > </ NavigationMenuList > </ NavigationMenu >
Styling Classes The following CSS classes are applied by the Navigation Menu components:
navigation-menu – Root navigation menu containernavigation-menu-list – List container for navigation itemsnavigation-menu-item – Individual navigation itemnavigation-menu-trigger – Clickable trigger elementnavigation-menu-trigger-icon – Icon in the triggernavigation-menu-content – Dropdown content containernavigation-menu-link – Navigation link elementnavigation-menu-indicator – Active item indicatornavigation-menu-indicator-arrow – Indicator arrow elementnavigation-menu-viewport – Content viewport containernavigation-menu-viewport-wrapper – Viewport wrapper element For more examples, visit the Storybook . 