Menu

Context menus and dropdown menus.

Basic usage

File

NewOpenSave

Delete

<div class="kit-menu">
  <div class="kit-menu-header">File</div>
  <a class="kit-menu-item" href="#">New</a>
  <a class="kit-menu-item" href="#">Open</a>
  <a class="kit-menu-item" href="#">Save</a>
  <div class="kit-menu-separator"></div>
  <a class="kit-menu-item -danger" href="#">Delete</a>
</div>

Active and disabled items

Selected itemNormal itemDisabled item

<div class="kit-menu">
  <a class="kit-menu-item -active" href="#">Selected item</a>
  <a class="kit-menu-item" href="#">Normal item</a>
  <a class="kit-menu-item -disabled" href="#">Disabled item</a>
</div>

Compact

CutCopyPaste

Select All

<div class="kit-menu -compact">
  <a class="kit-menu-item" href="#">Cut</a>
  <a class="kit-menu-item" href="#">Copy</a>
  <a class="kit-menu-item" href="#">Paste</a>
  <div class="kit-menu-separator"></div>
  <a class="kit-menu-item" href="#">Select All</a>
</div>