Ariakit
/

Menubar

Render a visually persistent menu similar to those found near the top of the window in desktop apps. This component is based on the WAI-ARIA Menubar Pattern⁠.

MenubarMenuDropdowns
Edit example
Open preview in a new tab
import { Menubar } from "@ariakit/react";

import {

  Menu,

  MenuButton,

  MenuItem,

  MenuProvider,

  MenuSeparator,

} from "./menu.tsx";

import "./style.css";



export default function Example() {

  return (

    <Menubar className="menubar">

      <MenuProvider>

        <MenuItem className="menubar-item" render={<MenuButton />}>

          File

        </MenuItem>

        <Menu>

          <MenuItem>New Tab</MenuItem>

          <MenuItem>New Window</MenuItem>

          <MenuItem>Open File</MenuItem>

          <MenuItem>Open Location</MenuItem>

          <MenuSeparator />

          <MenuItem>Close Window</MenuItem>

          <MenuItem>Close Tab</MenuItem>

          <MenuItem>Save Page As</MenuItem>

          <MenuSeparator />

          <MenuProvider>

            <MenuItem render={<MenuButton />}>Share</MenuItem>

            <Menu>

              <MenuItem>Email Link</MenuItem>

              <MenuItem>Messages</MenuItem>

              <MenuItem>Notes</MenuItem>

              <MenuItem>Reminders</MenuItem>

              <MenuItem>More...</MenuItem>

            </Menu>

          </MenuProvider>

          <MenuItem>Print</MenuItem>

        </Menu>

      </MenuProvider>

      <MenuProvider>

        <MenuItem className="menubar-item" render={<MenuButton />}>

          Edit

        </MenuItem>

        <Menu>

          <MenuItem>Undo</MenuItem>

          <MenuItem>Redo</MenuItem>

          <MenuSeparator />

          <MenuItem>Cut</MenuItem>

          <MenuItem>Copy</MenuItem>

          <MenuItem>Paste</MenuItem>

          <MenuItem>Paste and Match Style</MenuItem>

          <MenuItem>Delete</MenuItem>

          <MenuItem>Select All</MenuItem>

          <MenuSeparator />

          <MenuProvider>

            <MenuItem render={<MenuButton />}>Find</MenuItem>

            <Menu>

              <MenuItem>Search the Web</MenuItem>

              <MenuSeparator />

              <MenuItem>Find</MenuItem>

              <MenuItem>Find Next</MenuItem>

              <MenuItem>Find Previous</MenuItem>

              <MenuItem>Use Selection for Find</MenuItem>

              <MenuItem disabled>Jump to Selection</MenuItem>

            </Menu>

          </MenuProvider>

          <MenuProvider>

            <MenuItem render={<MenuButton />}>Spelling and Grammar</MenuItem>

            <Menu>

              <MenuItem>Show Spelling and Grammar</MenuItem>

              <MenuItem>Check Document Now</MenuItem>

            </Menu>

          </MenuProvider>

          <MenuProvider>

            <MenuItem render={<MenuButton />}>Substitutions</MenuItem>

            <Menu>

              <MenuItem>Show Substitutions</MenuItem>

            </Menu>

          </MenuProvider>

          <MenuSeparator />

          <MenuItem disabled>Start Dictation</MenuItem>

          <MenuItem>Emoji &amp; Symbols</MenuItem>

        </Menu>

      </MenuProvider>

      <MenuProvider>

        <MenuItem className="menubar-item" render={<MenuButton />}>

          View

        </MenuItem>

        <Menu>

          <MenuItem disabled>Stop</MenuItem>

          <MenuItem>Force Reload This Page</MenuItem>

          <MenuSeparator />

          <MenuItem>Enter Full Screen</MenuItem>

          <MenuItem disabled>Actual Size</MenuItem>

          <MenuItem>Zoom In</MenuItem>

          <MenuItem>Zoom Out</MenuItem>

          <MenuSeparator />

          <MenuItem>Cast</MenuItem>

          <MenuSeparator />

          <MenuProvider>

            <MenuItem render={<MenuButton />}>Developer</MenuItem>

            <Menu>

              <MenuItem>View Source</MenuItem>

              <MenuItem>Developer Tools</MenuItem>

              <MenuItem>Inspect Elements</MenuItem>

              <MenuItem>JavaScript Console</MenuItem>

              <MenuItem>Allow JavaScript from Apple Events</MenuItem>

            </Menu>

          </MenuProvider>

        </Menu>

      </MenuProvider>

    </Menubar>

  );

}

Examples

Navigation MenubarUsing Menubar, Menu, and Portal to create an accessible, tabbable navigation menu widget with links and menu buttons that expand on hover and focus.
View all Menubar examples

API

useMenubarStore()

useMenubarContext()



<MenubarProvider>

  <Menubar />

</MenubarProvider>

Can I use Menubar for site navigation?

Short answer: Yes, but be mindful. Check out the Navigation Menubar example.

ARIA doesn't specify how you should structure the contents of your site. It just describes how the roles should behave. If you've designed your site navigation to work precisely like a menubar and it's clear to the user, then you can use Menubar.

Using ARIA roles is like signing a contract with the user. You're saying, "I'm going to use this role to represent this thing, and you can expect it to work like this". If you don't follow through, you're breaking that contract, and the user will be confused.

In the case of the menubar⁠ role, the user expects being able to use arrow keys to navigate between menu items. Ariakit provides this behavior out of the box.

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue⁠