Base

Class	Description
.ui-menu	Base class

Override these CSS custom properties to customize the component.

Token	Default	Description
--ui-menu-min-width	calc(var(--ui-unit) * 16)	Minimum width
--ui-menu-max-height	calc(var(--ui-unit) * 40)	Maximum height
--ui-menu-padding	calc(var(--ui-unit) * 1)	Padding on all sides
--ui-menu-radius	var(--ui-radius-md)	Corner radius
--ui-menu-bg	var(--ui-color-bg)	Background color
--ui-menu-border-color	var(--ui-color-border)	Border color
--ui-menu-shadow	var(--ui-shadow-lg)	Box shadow
--ui-menu-item-padding	calc(var(--ui-unit) * 1) calc(var(--ui-unit) * 2)	Item padding on all sides
--ui-menu-item-radius	var(--ui-radius-sm)	Item corner radius
--ui-menu-item-bg-hover	var(--ui-color-bg-subtle)	Item bg hover

<div class="ui-menu">
  <ul class="ui-menu__group">
    <li>
      <button class="ui-menu__item">
        <span class="ui-menu__item-icon">+</span>
New File
        <span class="ui-menu__item-shortcut">Cmd+N</span>
      </button>
    </li>
    <li>
      <button class="ui-menu__item">
        <span class="ui-menu__item-icon">O</span>
Open
        <span class="ui-menu__item-shortcut">Cmd+O</span>
      </button>
    </li>
    <li>
      <button class="ui-menu__item">
        <span class="ui-menu__item-icon">S</span>
Save
        <span class="ui-menu__item-shortcut">Cmd+S</span>
      </button>
    </li>
  </ul>
</div>

<div class="ui-menu">
  <div class="ui-menu__label">Edit</div>
  <ul class="ui-menu__group">
    <li>
      <button class="ui-menu__item">Cut</button>
    </li>
    <li>
      <button class="ui-menu__item">Copy</button>
    </li>
    <li>
      <button class="ui-menu__item">Paste</button>
    </li>
  </ul>
  <div class="ui-menu__separator"></div>
  <div class="ui-menu__label">View</div>
  <ul class="ui-menu__group">
    <li>
      <button class="ui-menu__item">Zoom In</button>
    </li>
    <li>
      <button class="ui-menu__item">Zoom Out</button>
    </li>
  </ul>
</div>

<div class="ui-menu">
  <ul class="ui-menu__group">
    <li>
      <button class="ui-menu__item">Normal Item</button>
    </li>
    <li>
      <button class="ui-menu__item ui-menu__item--disabled" aria-disabled="true">Disabled Item</button>
    </li>
    <li>
      <button class="ui-menu__item ui-menu__item--danger">Delete</button>
    </li>
  </ul>
</div>

<div class="ui-menu">
  <ul class="ui-menu__group">
    <li>
      <button class="ui-menu__item ui-menu__item--check">
        <span class="ui-menu__item-indicator">✓</span>
Show Toolbar
      </button>
    </li>
    <li>
      <button class="ui-menu__item ui-menu__item--check">
        <span class="ui-menu__item-indicator"></span>
Show Sidebar
      </button>
    </li>
  </ul>
  <div class="ui-menu__separator"></div>
  <ul class="ui-menu__group">
    <li>
      <button class="ui-menu__item ui-menu__item--radio">
        <span class="ui-menu__item-indicator">•</span>
List View
      </button>
    </li>
    <li>
      <button class="ui-menu__item ui-menu__item--radio">
        <span class="ui-menu__item-indicator"></span>
Grid View
      </button>
    </li>
  </ul>
</div>