WIP
Edit me

When users use the Web Rotor in combination with Chrome, the role="menuitem" will move all items from ‘Links’ to ‘Form controls’, this could confuse users who are used to find the menu items within the links panel. I need to research more about this topic, at this moment in time I think you should use role="menuitem".

Advised markup

<nav>
  <menu role="menubar">
    <li role="presentation">
        <a href="#" role="menuitem">Page</a>
    </li>
    <li role="presentation">
        <button type="button" role="menuitem" aria-expanded="false">Action</button>
        <ul role="menu">
          <li role="presentation">
            <a href="#" role="menuitem">Submenu item</a>
          </li>
        </ul>
    </li>
  </menu>
</nav>

A menu is shown when a user clicks on a button.

Visual representation of a menu

<!-- menu button -->
<button type="menu" aria-controls="popup-menu" aria-expanded="false">Menu Button</button>

<!-- menu -->
<menu id="popup-menu" role="menu" hidden>
  <li role="presentation">
      <button role="menuitem" type="button">Action</button>
  </li>
  <li role="presentation">
      <button role="menuitem" type="button">Another action</button>
  </li>
  <hr>
  <li role="presentation">
      <button role="menuitem" type="button">Separated action</button>
  </li>
</menu>

Context menu

A context menu is shown when right-clicks on a element.

Visual representation of a context menu

A visual persistent menu offering the user a quick access to a consistent set of commands, like the macOS menubar shown in beneath gif.

Visual representation of a menubar

<menu role="menubar">
  <li role="presentation">
      <button role="menuitem" type="button">Action</button>
  </li>
  <li role="presentation">
      <button role="menuitem" type="button">Another action</button>
  </li>
  <hr>
  <li role="presentation">
      <button role="menuitem" type="button">Separated action</button>
  </li>
</menu>

Specifications