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
  • Northstar launch
  • Panel navigation
  • Icons and preferences
  • Disabled menubar
  • Recommendations
  • Usage boundaries
  • API reference

Navigation

Menubar

Adds horizontal or vertical keyboard navigation across composed menus.

idle

Usage

import { Menubar, MenubarTrigger } from "@mizen-labs/ui";

Anatomy

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

<Menubar>
	<MenubarTrigger />
</Menubar>

Examples

Northstar launch

Panel navigation

Icons and preferences

Icons, shortcuts, disabled actions, nested menus, checkboxes, and radio choices.

Disabled menubar

The entire command bar can be disabled.

Recommendations

GuidancePractice
Do

Use familiar command categories and consistent ordering. Keep individual menus short and task-focused.

Usage boundaries

GuidanceBoundary
Scope

Use Navigation Menu for site destinations. Menubar groups application commands with menu keyboard behavior.

API reference

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

PropTypeDefaultDescription
MenubarMenubarPropsHorizontalBase UI-managed menu-bar navigation; supports horizontal and vertical orientation.
orientationhorizontal | verticalhorizontalSets the axis used for trigger keyboard navigation.
MenubarTriggerMenubarTriggerPropsInside MenuPairs with an existing Menu root, popup, and menu items; supports disabled triggers.
PreviousBreadcrumbNextNavigation Menu

Use arrow keys to move between menus, then open an action.

Northstar launch

Keep projects, conversations, and decisions together. The autumn release gives everyday work a little more room.

Release notes · Local draft

Panel navigation

Use vertical menus beside a working canvas.

Autosave on. Density: comfortable.