Skip to content

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

Free

Menubar with Submenu for Ark UI

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, Ark 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 value="new-file">New File</MenubarItem>
      <MenubarSub>
        <MenubarSubTrigger>Open Recent</MenubarSubTrigger>
        <MenubarSubContent>
          <MenubarItem value="document-1-txt">Document 1.txt</MenubarItem>
          <MenubarItem value="document-2-txt">Document 2.txt</MenubarItem>
          <MenubarItem value="document-3-txt">Document 3.txt</MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
      <MenubarItem value="save">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

Sets value="new-file", value="document-1-txt", value="document-2-txt", value="document-3-txt" and value="save". The rest is on the Menubar page.

All 10 menubar examples