Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Menubar with Icons for React

A File menu with an icon before each command: a file for New File, a folder for Open and a save icon for Save.

File opens three rows. New File has a file icon, Open has a folder icon and Save has a save icon, each before the words.

Add icons when the commands are ones people already know from desktop apps. A Command menu is easier once the list is long enough to search. Base UI in React does not pick the icons.

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

Anatomy

Menubar anatomy: trigger, root, item, separator, sub trigger, content

Usage

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        <FileIcon aria-hidden="true" />
        New File
      </MenubarItem>
      <MenubarItem>
        <FolderIcon aria-hidden="true" />
        Open
      </MenubarItem>
      <MenubarItem>
        <SaveIcon aria-hidden="true" />
        Save
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

FAQ

Where does each icon go?

First inside each MenubarItem, before the label. The item lays them out with a gap.

What size are these icons?

The item sizes them; the demo sets no size class. Add one, such as size-4, only to change it.

Which menu is this?

A single MenubarMenu whose MenubarTrigger reads File, with New File, Open and Save in its MenubarContent.

How do I add a hint beside Save?

Add a MenubarShortcut after the label, such as ⌘S. It lines up at the end of the row and only prints the hint.

Can I open File from the keyboard?

Yes. Focus the trigger and press Enter, Space or Arrow Down, then use the arrow keys and Enter.

Why is aria-hidden on the icon?

The label already says what the row does, so the icon is decoration. aria-hidden keeps screen readers from announcing it.

API Reference

Menubar

No extra props in this demo. The rest is on the Menubar page.

All 10 menubar examples