Menubar

A horizontal menu bar with dropdown menus, commonly used for application-level navigation.

The Menubar component provides a horizontal strip of menu triggers that each open a dropdown menu. It supports items, checkbox items, radio items, sub-menus, labels, separators, and keyboard shortcuts — ideal for desktop-style app menus.

Preview

File

Edit

View

Help

Installation

npx novaui-cli add menubar

Import

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarCheckboxItem,
  MenubarRadioItem,
  MenubarLabel,
  MenubarSeparator,
  MenubarShortcut,
  MenubarGroup,
  MenubarPortal,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarRadioGroup,
} from 'novaui-components'

Basic Usage

File

Edit

View

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarShortcut,
} from 'novaui-components'

export function BasicMenubar() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New Tab
            <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            New Window
            <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Print
            <MenubarShortcut>⌘P</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            Undo
            <MenubarShortcut>⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Redo
            <MenubarShortcut>⇧⌘Z</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Zoom In</MenubarItem>
          <MenubarItem>Zoom Out</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}

With Checkbox and Radio Items

import { useState } from 'react'

export function CheckboxMenubar() {
  const [sidebar, setSidebar] = useState(true)
  const [console, setConsole] = useState(false)

  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarLabel>Panels</MenubarLabel>
          <MenubarSeparator />
          <MenubarCheckboxItem
            checked={sidebar}
            onPress={() => setSidebar(!sidebar)}
          >
            Sidebar
          </MenubarCheckboxItem>
          <MenubarCheckboxItem
            checked={console}
            onPress={() => setConsole(!console)}
          >
            Console
          </MenubarCheckboxItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}

Props API

Menubar

Extends React.ComponentPropsWithoutRef<typeof View>:

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

MenubarMenu

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	MenubarTrigger and MenubarContent

MenubarTrigger

Extends React.ComponentPropsWithoutRef<typeof Pressable>:

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as the child element
`className`	`string`	-	Additional CSS classes

MenubarContent

Extends React.ComponentPropsWithoutRef<typeof View>:

Prop	Type	Default	Description
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Alignment relative to the trigger
`sideOffset`	`number`	`8`	Offset from the trigger in pixels
`className`	`string`	-	Additional CSS classes

MenubarItem

Extends React.ComponentPropsWithoutRef<typeof Pressable>:

Prop	Type	Default	Description
`inset`	`boolean`	`false`	Adds left padding for alignment

MenubarCheckboxItem

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Whether the checkbox is checked

MenubarRadioItem

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Whether the radio item is selected
`value`	`string`	-	The value of the radio item

MenubarLabel

Prop	Type	Default	Description
`inset`	`boolean`	`false`	Adds left padding for alignment

Best Practices

Use for app-level menus: Menubar is best suited for desktop-style application navigation
Keep triggers short: Use single words or short phrases as trigger labels
Consistent structure: Maintain similar item patterns across all menus
Group with separators: Use MenubarSeparator and MenubarLabel for visual organization
Add shortcuts: Use MenubarShortcut to show keyboard shortcuts for discoverability

Dropdown Menu - For single-button triggered menus
Context Menu - For long-press contextual menus
Navigation Menu - For site navigation with content panels

Continue reading

Getting Started Components Overview Popular: Dialog SEO Playbook

Menubar

Continue reading

On this page