---
title: Menubar
subtitle: A menu bar providing commands and options for your application.
description: A menu bar providing commands and options for your application.
---
# Menubar
A menu bar providing commands and options for your application.
## Demo
### Tailwind
This example shows how to implement the component using Tailwind CSS.
```tsx
/* index.tsx */
'use client';
import * as React from 'react';
import { Menubar } from '@base-ui/react/menubar';
import { Menu } from '@base-ui/react/menu';
export default function ExampleMenubar() {
return (
File
New
Open
Save
Export
PDF
PNG
SVG
Print
Edit
Cut
Copy
Paste
View
Zoom In
Zoom Out
Layout
Single Page
Two Pages
Continuous
Full Screen
Help
);
}
function handleClick(event: React.MouseEvent) {
// eslint-disable-next-line no-console
console.log(`${event.currentTarget.textContent} clicked`);
}
function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
return (
);
}
```
### CSS Modules
This example shows how to implement the component using CSS Modules.
```css
/* index.module.css */
.Menubar {
display: flex;
background-color: var(--color-gray-50);
border: 1px solid var(--color-gray-200);
border-radius: 0.375rem;
padding: 0.125rem;
}
.MenuTrigger {
box-sizing: border-box;
background: none;
padding: 0 0.75rem;
margin: 0;
outline: 0;
border: 0;
color: var(--color-gray-600);
border-radius: 0.25rem;
user-select: none;
height: 2rem;
font-family: inherit;
font-size: 0.875rem;
font-weight: 500;
&[data-pressed],
&:focus-visible {
background-color: var(--color-gray-100);
outline: none;
}
&[data-disabled] {
opacity: 0.5;
}
}
.MenuPositioner {
outline: 0;
}
.MenuPopup {
box-sizing: border-box;
padding-block: 0.25rem;
border-radius: 0.375rem;
background-color: canvas;
color: var(--color-gray-900);
transform-origin: var(--transform-origin);
&[data-ending-style] {
opacity: 0;
transition: opacity 150ms;
}
&[data-instant] {
transition: none;
}
@media (prefers-color-scheme: light) {
outline: 1px solid var(--color-gray-200);
box-shadow:
0 10px 15px -3px var(--color-gray-200),
0 4px 6px -4px var(--color-gray-200);
}
@media (prefers-color-scheme: dark) {
outline: 1px solid var(--color-gray-300);
outline-offset: -1px;
}
}
.MenuItem {
outline: 0;
cursor: default;
user-select: none;
padding: 0.5rem 1rem;
display: flex;
font-size: 0.875rem;
line-height: 1rem;
align-items: center;
justify-content: space-between;
gap: 1rem;
&[data-popup-open] {
z-index: 0;
position: relative;
}
&[data-popup-open]::before {
content: '';
z-index: -1;
position: absolute;
inset-block: 0;
inset-inline: 0.25rem;
border-radius: 0.25rem;
background-color: var(--color-gray-100);
}
&[data-highlighted] {
z-index: 0;
position: relative;
color: var(--color-gray-50);
}
&[data-highlighted]::before {
content: '';
z-index: -1;
position: absolute;
inset-block: 0;
inset-inline: 0.25rem;
border-radius: 0.25rem;
background-color: var(--color-gray-900);
}
}
.MenuSeparator {
margin: 0.375rem 1rem;
height: 1px;
background-color: var(--color-gray-200);
}
```
```tsx
/* index.tsx */
'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 (
File
New
Open
Save
Export
PDF
PNG
SVG
Print
Edit
Cut
Copy
Paste
View
Zoom In
Zoom Out
Layout
Single Page
Two Pages
Continuous
Full Screen
Help
);
}
function handleClick(event: React.MouseEvent) {
// eslint-disable-next-line no-console
console.log(`${event.currentTarget.textContent} clicked`);
}
function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
return (
);
}
```
## Anatomy
Import the component and assemble its parts:
```jsx title="Anatomy"
import { Menubar } from '@base-ui/react/menubar';
import { Menu } from '@base-ui/react/menu';
;
```
## API reference
The container for menus.
**Menubar Props:**
| Prop | Type | Default | Description |
| :---------- | :--------------------------------------------------------------------------- | :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| loopFocus | `boolean` | `true` | Whether to loop keyboard focus back to the first item
when the end of the list is reached while using the arrow keys. |
| modal | `boolean` | `true` | Whether the menubar is modal. |
| disabled | `boolean` | `false` | Whether the whole menubar is disabled. |
| orientation | `Menu.Root.Orientation` | `'horizontal'` | The orientation of the menubar. |
| className | `string \| ((state: Menubar.State) => string \| undefined)` | - | CSS class applied to the element, or a function that
returns a class based on the component’s state. |
| style | `CSSProperties \| ((state: Menubar.State) => CSSProperties \| undefined)` | - | - |
| render | `ReactElement \| ((props: HTMLProps, state: Menubar.State) => ReactElement)` | - | 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. |