Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Anatomy
  • Examples
  • Workspace resources
  • Icons and navigation states
  • Recommendations
  • Usage boundaries
  • API reference

Navigation

Navigation Menu

Provides a responsive site navigation menu with managed popup behavior and framework links.

idle

Usage

import {
	NavigationMenu,
	NavigationMenuContent,
	NavigationMenuItem,
	NavigationMenuLink,
	NavigationMenuList,
	NavigationMenuPopup,
	NavigationMenuTrigger,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

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

Examples

Workspace resources

Browse components and guides without leaving the current workspace.

Icons and navigation states

Controlled panels, a current link, disabled navigation, framework links, and scrolling content.

Recommendations

GuidancePractice
Do

Use destination names and mark the current route. Keep menus short enough to scan without searching.

Usage boundaries

GuidanceBoundary
Scope

Use Menu for commands. Route matching and framework navigation remain application responsibilities.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
NavigationMenu / NavigationMenuList / NavigationMenuItemBase UI navigation menu parts—Compose the root, horizontal list, and each trigger or link item.
NavigationMenuTrigger / NavigationMenuContentTrigger and popup content—Pair each disclosure trigger with its links inside the matching item.
NavigationMenuPopupPopup layerafter NavigationMenuListMount one popup viewport after the list under the root.
NavigationMenuLink.renderReactElement | render functionundefinedComposes framework links while preserving menu behavior.
NavigationMenuLink.activebooleanfalseMarks the current destination.
NavigationMenuLink.descriptionReactNodeundefinedAdds one muted line under the label in a menu panel.
PreviousMenubarNextPagination
  • Pricing
  • All components

Build a calmer workspace

Start with a component, then combine it with familiar patterns for forms, navigation, and data.

  • Current section

Panel: closed