Menubar

A menu bar providing commands and options for your application.

'use client'; import * as React from 'react'; import { Menubar } from '@base-ui/react/menubar'; import { Menu } from '@base-ui/react/menu'; import styles from './index.module.css'; export default function ExampleMenubar() { return ( <Menubar className={styles.Menubar}> <Menu.Root> <Menu.Trigger className={styles.MenuTrigger}>File</Menu.Trigger> <Menu.Portal> <Menu.Positioner className={styles.MenuPositioner} sideOffset={6} alignOffset={-2}> <Menu.Popup className={styles.MenuPopup}> <Menu.Item className={styles.MenuItem} onClick={handleClick}> New </Menu.Item> <Menu.Item className={styles.MenuItem} onClick={handleClick}> Open </Menu.Item> <Menu.Item className={styles.MenuItem} onClick={handleClick}> Save </Menu.Item> <Menu.SubmenuRoot> <Menu.SubmenuTrigger className={styles.MenuItem}> Export <ChevronRightIcon /> </Menu.SubmenuTrigger> <Menu.Portal> <Menu.Positioner alignOffset={-4}> <Menu.Popup className={styles.MenuPopup}> <Menu.Item className={styles.MenuItem} onClick={handleClick}> PDF </Menu.Item> <Menu.Item className={styles.MenuItem} onClick={handleClick}> PNG </Menu.Item> <Menu.Item className={styles.MenuItem} onClick={handleClick}> SVG </Menu.Item> </Menu.Popup> </Menu.Positioner> </Menu.Portal> </Menu.SubmenuRoot> <Menu.Separator className={styles.MenuSeparator} /> <Menu.Item className={styles.MenuItem} onClick={handleClick}> Print </Menu.Item> </Menu.Popup> </Menu.Positioner> </Menu.Portal> </Menu.Root> <Menu.Root> <Menu.Trigger className={styles.MenuTrigger}>Edit</Menu.Trigger> <Menu.Portal> <Menu.Positioner className={styles.MenuPositioner} sideOffset={6}> <Menu.Popup className={styles.MenuPopup}> <Menu.Item className={styles.MenuItem} onClick={handleClick}> Cut </Menu.Item> <Menu.Item className={styles.MenuItem} onClick={handleClick}> Copy </Menu.Item> <Menu.Item className={styles.MenuItem} onClick={handleClick}> Paste </Menu.Item> </Menu.Popup> </Menu.Positioner> </Menu.Portal> </Menu.Root> <Menu.Root> <Menu.Trigger className={styles.MenuTrigger}>View</Menu.Trigger> <Menu.Portal> <Menu.Positioner className={styles.MenuPositioner} sideOffset={6}> <Menu.Popup className={styles.MenuPopup}> <Menu.Item className={styles.MenuItem} onClick={handleClick}> Zoom In </Menu.Item> <Menu.Item className={styles.MenuItem} onClick={handleClick}> Zoom Out </Menu.Item> <Menu.SubmenuRoot> <Menu.SubmenuTrigger className={styles.MenuItem}> Layout <ChevronRightIcon /> </Menu.SubmenuTrigger> <Menu.Portal> <Menu.Positioner alignOffset={-4}> <Menu.Popup className={styles.MenuPopup}> <Menu.Item className={styles.MenuItem} onClick={handleClick}> Single Page </Menu.Item> <Menu.Item className={styles.MenuItem} onClick={handleClick}> Two Pages </Menu.Item> <Menu.Item className={styles.MenuItem} onClick={handleClick}> Continuous </Menu.Item> </Menu.Popup> </Menu.Positioner> </Menu.Portal> </Menu.SubmenuRoot> <Menu.Separator className={styles.MenuSeparator} /> <Menu.Item className={styles.MenuItem} onClick={handleClick}> Full Screen </Menu.Item> </Menu.Popup> </Menu.Positioner> </Menu.Portal> </Menu.Root> <Menu.Root disabled> <Menu.Trigger className={styles.MenuTrigger}>Help</Menu.Trigger> </Menu.Root> </Menubar> ); } function handleClick(event: React.MouseEvent<HTMLElement>) { // eslint-disable-next-line no-console console.log(`${event.currentTarget.textContent} clicked`); } function ChevronRightIcon(props: React.ComponentProps<'svg'>) { return ( <svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}> <path d="M6 12L10 8L6 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> </svg> ); }

Anatomy

Import the component and assemble its parts:

Anatomy

import { Menubar } from '@base-ui/react/menubar'; import { Menu } from '@base-ui/react/menu';  <Menubar>  <Menu.Root>  <Menu.Trigger />  <Menu.Portal>  <Menu.Backdrop />  <Menu.Positioner>  <Menu.Popup>  <Menu.Arrow />  <Menu.Item />  <Menu.Separator />  <Menu.Group>  <Menu.GroupLabel />  </Menu.Group>  <Menu.RadioGroup>  <Menu.RadioItem />  </Menu.RadioGroup>  <Menu.CheckboxItem />  </Menu.Popup>  </Menu.Positioner>  </Menu.Portal>  </Menu.Root> </Menubar>

API reference

loopFocusbooleantrue

Name: loopFocus
Description: Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
Type: boolean | undefined
Default: true

Name: modal
Description: Whether the menubar is modal.
Type: boolean | undefined
Default: true

disabledbooleanfalse

Name: disabled
Description: Whether the whole menubar is disabled.
Type: boolean | undefined
Default: false

orientationMenu.Root.Orientation'horizontal'

Name: orientation
Description: The orientation of the menubar.
Type: 'horizontal' | 'vertical' | undefined
Default: 'horizontal'

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Menubar.State) => string | undefined)

styleReact.CSSProperties | function—

Name: style
Type: | React.CSSProperties | ((state: Menubar.State) => CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Menubar.State, ) => ReactElement)