Menubar
A row of menus, like an app menu bar.
Surfaces
Use raised on the window background, plain inside a card so there is no box in a box, and outlined in a Section or other flat region.
raised · on window
outlined · flat region
plain · in a card
Usage
These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.
- Use Menubar for app-style command menus. For site navigation, use NavigationMenu.
API
Props that the library adds. Every part also takes all the Base UI props.
Menubar.Root
| Prop | Type | Default | Description |
|---|---|---|---|
| appearance | 'plain' | 'outlined' | 'raised' | 'raised' | Sets the bar surface. Raised adds a translucent fill and a shadow. |





