Menubar

arrow_back arrow_forward

A horizontal menu bar with nested dropdown menus.

File

New File⌘N

Open⌘O

Save⌘S

Export⌘E

Edit

View

Help

<div class="menubar">
  <div class="mb-item">File
    <div class="mb-drop">
      <div class="mb-drop-item">New File <kbd>⌘N</kbd></div>
      <div class="mb-drop-item">Save <kbd>⌘S</kbd></div>
    </div>
  </div>
  <div class="mb-item">Edit</div>
  <div class="mb-item">View</div>
</div>

Installation

Built with pure HTML and CSS. Include ds-shared.css in your project.

pnpm add @norbielink/ds

API Reference

Classes

Class	Description
`menubar`	Horizontal container bar
`mb-item`	Top-level menu trigger
`mb-item.open`	Active/expanded state
`mb-drop`	Dropdown panel (position:absolute)
`mb-drop-item`	Menu item row
`mb-sep`	Horizontal divider

← Previous Lists Next → Menus