← →

Menubar

Menubar is a native web component that builds a desktop-app-style menu bar (role=menubar), where each menu opens a dropdown panel built on the Popover API and CSS anchor positioning. Use it when you need a persistent horizontal command bar (File, Edit, View) at the top of an application. It supports switching between open menus on hover and full keyboard navigation (arrows, Home/End, Esc).

Preview

<pura-menubar id="barra">
  <pura-menubar-menu label="File">
    <pura-menu-item>New file<span slot="shortcut">Ctrl+N</span></pura-menu-item>
    <pura-menu-item>Open<span slot="shortcut">Ctrl+O</span></pura-menu-item>
    <pura-menu-item>Save<span slot="shortcut">Ctrl+S</span></pura-menu-item>
    <pura-menu-item disabled>Save as...</pura-menu-item>
  </pura-menubar-menu>
  <pura-menubar-menu label="Edit">
    <pura-menu-item>Undo<span slot="shortcut">Ctrl+Z</span></pura-menu-item>
    <pura-menu-item>Redo<span slot="shortcut">Ctrl+Y</span></pura-menu-item>
    <pura-menu-item inset>Copy</pura-menu-item>
    <pura-menu-item inset>Paste</pura-menu-item>
  </pura-menubar-menu>
  <pura-menubar-menu label="View">
    <pura-menu-item>Full screen<span slot="shortcut">F11</span></pura-menu-item>
    <pura-menu-item>Zoom +</pura-menu-item>
  </pura-menubar-menu>
  <pura-menubar-menu label="Help" disabled></pura-menubar-menu>
</pura-menubar>

<script type="module">
  const barra = document.getElementById("barra");
  barra.addEventListener("select", (e) => {
    console.log("Selected item:", e.target.textContent.trim());
  });
</script>

Attributes

Attribute	Type	Default	Description
`label`	string	""	Trigger text of a <pura-menubar-menu>.
`disabled`	boolean	false	Disables a <pura-menubar-menu> or a <pura-menu-item>, preventing opening/selection.
`inset`	boolean	false	On <pura-menu-item>, reserves icon space to align items that have no icon.
`open`	boolean	false	Reflected on <pura-menubar-menu> when its panel is open (read-only).

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/menubar.js"></script>

JavaScript

import "./pura/lib/menubar.js";

Slots

defaulticonshortcut

Events

opencloseselect