Menubar Requires JS

About

Overview

Use a Menubar when your app has more global commands than fit in a button row, and the desktop-app metaphor (File menu, Edit menu) makes sense — IDEs, design tools, document editors.

Live

Demo

<ren-menubar aria-label="Main menu">
  <button role="menuitem">File</button>
  <button role="menuitem">Edit</button>
  <button role="menuitem">View</button>
</ren-menubar>

Reference

API

Each top-level item is a <button role="menuitem">. Submenus use Menu popovers triggered by each item.

Inclusive by default

Accessibility

• Wrapper has role="menubar" + descriptive aria-label.
• Arrow keys navigate horizontally between top-level items, vertically inside an open submenu.
• Esc closes any open submenu.