This site is under construction Subscribe to updates

MenuBar

Rendering a visually persistent menu similar to those found near the top of the window in desktop applications. This example is based on the WAI-ARIA Menu Bar Pattern.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import { Menu, MenuBar, MenuItem, MenuSeparator } from "./menu";
import "./style.css";

export default function Example() {
  return (
    <MenuBar>
      <Menu label="File">
        <MenuItem label="New Tab" />
        <MenuItem label="New Window" />
        <MenuItem label="Open File" />
        <MenuItem label="Open Location" />
        <MenuSeparator />
        <MenuItem label="Close Window" />
        <MenuItem label="Close Tab" />
        <MenuItem label="Save Page As" />
        <MenuSeparator />
        <Menu label="Share">
          <MenuItem label="Email Link" />
          <MenuItem label="Messages" />
          <MenuItem label="Notes" />
          <MenuItem label="Reminders" />
          <MenuItem label="More..." />
        </Menu>
        <MenuSeparator />
        <MenuItem label="Print" />
      </Menu>
      <Menu label="Edit">
        <MenuItem label="Undo" />
        <MenuItem label="Redo" />
        <MenuSeparator />
        <MenuItem label="Cut" />
        <MenuItem label="Copy" />
        <MenuItem label="Paste" />
        <MenuItem label="Paste and Match Style" />
        <MenuItem label="Delete" />
        <MenuItem label="Select All" />
        <MenuSeparator />
        <Menu label="Find">
          <MenuItem label="Search the Web" />
          <MenuSeparator />
          <MenuItem label="Find" />
          <MenuItem label="Find Next" />
          <MenuItem label="Find Previous" />
          <MenuItem label="Use Selection for Find" />
          <MenuItem disabled label="Jump to Selection" />
        </Menu>
        <Menu label="Spelling and Grammar">
          <MenuItem label="Show Spelling and Grammar" />
          <MenuItem label="Check Document Now" />
        </Menu>
        <Menu label="Substitutions">
          <MenuItem label="Show Substitutions" />
        </Menu>
        <MenuSeparator />
        <MenuItem disabled label="Start Dictation" />
        <MenuItem label="Emoji &amp; Symbols" />
      </Menu>
      <Menu label="View">
        <MenuItem disabled label="Stop" />
        <MenuItem label="Force Reload This Page" />
        <MenuSeparator />
        <MenuItem label="Enter Full Screen" />
        <MenuItem disabled label="Actual Size" />
        <MenuItem label="Zoom In" />
        <MenuItem label="Zoom Out" />
        <MenuSeparator />
        <MenuItem label="Cast" />
        <MenuSeparator />
        <Menu label="Developer">
          <MenuItem label="View Source" />
          <MenuItem label="Developer Tools" />
          <MenuItem label="Inspect Elements" />
          <MenuItem label="JavaScript Console" />
          <MenuItem label="Allow JavaScript from Apple Events" />
        </Menu>
      </Menu>
    </MenuBar>
  );
}

Short answer: Yes, but you probably shouldn't.

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 menu bar and it's clear to the user (e.g., your app looks like a desktop application), 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 the whole component to work as a single tab stop. The Tab key will focus on the first item in the menu bar. Pressing Tab again will focus on the next tabbable element outside the menu bar. Inside the menu bar, the user expects to be able to use the arrow keys to navigate between menu items. Ariakit provides this behavior out of the box.

MenuBar

Can I use MenuBar for site navigation?