Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Menubar examples · Standard

Compact Menubar for React

A menubar with a single Options menu holding Settings, Preferences and Sign Out.

Framework
UI library

Not every app needs File, Edit and View. This menubar has a single Options menu with Settings and Preferences, then Sign Out after a separator. It's a starting point for a small app bar that can grow more menus later.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What is in this Options menu?

Settings and Preferences, a MenubarSeparator, then Sign Out. All three are plain MenubarItems with text only.

How is Sign Out styled?

Like the other rows; only the separator sets it apart. Add variant="destructive" on its MenubarItem to color it, as in the destructive action menubar.

How do I grow this into File and Edit?

Add another MenubarMenu inside Menubar, with its own MenubarTrigger and MenubarContent. The bar lays the triggers out in a row.

What does the separator do here?

It draws a line between the settings rows and Sign Out, and is announced as a separator. It can't be focused.

Can I open Options from the keyboard?

Yes. Focus the trigger and press Enter, Space or Arrow Down; the arrow keys then move through the rows, and Escape closes the menu.

When is this a dropdown instead?

When the menu won't grow into a bar of several menus. A Dropdown Menu on a button is lighter for a single list of actions.

All 10 menubar examples