Skip to content

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

Free

Menubar with Submenu for React

A File menu with New File, an Open Recent submenu of Document 1.txt, Document 2.txt and Document 3.txt, then Save.

File opens New File, Open Recent and Save. Open Recent has an arrow and lists Document 1.txt, Document 2.txt and Document 3.txt.

Nest a submenu when a few related commands, such as recent files, would crowd the parent menu. A Command menu is easier once that list gets long. On React, Base UI does not track recent files.

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>New File</MenubarItem>
      <MenubarSub>
        <MenubarSubTrigger>Open Recent</MenubarSubTrigger>
        <MenubarSubContent>
          <MenubarItem>Document 1.txt</MenubarItem>
          <MenubarItem>Document 2.txt</MenubarItem>
          <MenubarItem>Document 3.txt</MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
      <MenubarItem>Save</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

FAQ

How is Open Recent nested?

MenubarSub wraps a MenubarSubTrigger that reads Open Recent and a MenubarSubContent with the documents. The submenu opens beside its trigger and flips to the other side when there's no room.

Where does the arrow on Open Recent come from?

MenubarSubTrigger draws the chevron at the end of the row itself; the demo adds no icon.

What are the rows inside the submenu?

Document 1.txt, Document 2.txt and Document 3.txt, as plain MenubarItems.

What else is in the File menu?

New File above Open Recent and Save below it, both plain items.

Can I open the submenu from the keyboard?

Yes. Move to Open Recent and press Arrow Right or Enter. Arrow Left closes the submenu and returns to Open Recent.

How do I add another recent file?

Add a MenubarItem inside MenubarSubContent. For a real list, map over your recent files and give each row a key.

API Reference

Menubar

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

All 10 menubar examples