Menubar

Demo

Props

PropTypeDescription
menu{ items?: MenuItem[]; trigger?: React.ReactNode }[] (optional)An array of menu configurations, each with items and a trigger.
classNames{ [key: string]: string } (optional)Custom class names for different parts of the Menubar.
  • type: 'group'
  • text: string
  • icon: React.ReactNode (optional)
  • disabled: boolean (optional)
  • children: Array of MenuItem types (DefaultMenuItem, CheckboxMenuItem, RadioGroupMenuItem, SeparatorMenuItem)

DefaultMenuItem

  • type: 'default'
  • text: string
  • icon: React.ReactNode (optional)
  • shortcut: string (optional)
  • disabled: boolean (optional)
  • onSelect: (event: Event) => void (optional)

CheckboxMenuItem

  • type: 'checkbox'
  • text: string
  • shortcut: string (optional)
  • disabled: boolean (optional)
  • checked: boolean | 'indeterminate' (optional)
  • onCheckedChange: (checked: boolean) => void (optional)

RadioGroupMenuItem

  • type: 'radio-group'
  • label: string (optional)
  • options: { text: string; value: string }[]
  • value: string (optional)
  • onValueChange: (value: string) => void (optional)

SeparatorMenuItem

  • type: 'separator'

Styles

This component allows for custom styles via the classNames prop:

  • root: CSS class for styling the overall Menubar component.
  • trigger: CSS class for styling the menu trigger elements.
  • content: CSS class for styling the main content of the menu.
  • subTrigger: CSS class for styling sub-menu triggers.
  • subContent: CSS class for styling sub-menu contents.
  • item: CSS class for styling individual menu items.
  • shortcut: CSS class for styling keyboard shortcuts.
  • separator: CSS class for styling separators.
  • checkboxItem: CSS class for styling checkbox items.
  • radioGroup: CSS class for styling radio group containers.
  • label: CSS class for styling labels in radio groups.
  • radioItem: CSS class for styling radio items.

Previous

Hover Card

Next

Popover