Menu — Malkai design system

Overview

The menu is an attached panel containing an option list. It hangs from its control at every width. Each option may be plain text, include a supporting line, or carry one registry icon or photo when visual recognition helps. A destructive action pairs error ink with its consequence icon. Press the control.

Usage

Group secondary actions behind one triggerUse a menu when related actions should remain available without occupying separate controls on the surface.
Keep the panel attached to its triggerThe menu opens from the control that owns the actions, remains anchored to it, and returns focus to it when closed.
Use Dropdown for stored field valuesA menu performs an action. When a choice becomes the persistent value of a labelled field, use Dropdown instead.

Anatomy

1Trigger. The centred kebab is a real icon button. Its expanded state owns the attached panel and returns focus when the menu closes.
2Panel. A compact raised surface with its own rounded edge and shadow. It stays attached to the trigger rather than becoming a page-level list.
3Leading media. Optional. One registry icon or photo gives the option a recognisable face; it aligns to the complete row, not its top edge.
4Option copy. The title leads. A regular-weight body is added only when neighbouring titles need one short distinguishing fact.

Variants

The option list is Menu's content layer, not a separate component page. Choose the smallest row that distinguishes the available options; richer rows are not a hierarchy upgrade.

Title onlyThe default when labels already distinguish the actions.

Title and bodyOne supporting fact separates otherwise similar options.

Icon and titleEvery row carries one registry icon.

Icon, title and bodyMedia stays vertically centred against the complete row.

**Photo and title**Use visual recognition only when it is faster than reading.

**Photo, title and body**The richest row remains a compact menu option.

Without icons by defaultPlain labels are fastest when the choices already read distinctly.
One media column per menuIf one option uses an icon or photo, every sibling reserves and uses the same leading-media seat.
Supporting text only to disambiguateThe second line adds a fact; it never repeats the title in softer ink.
Icons replace a repeated kind labelUse one registry icon only when it makes the set faster to scan.
Photos identify visual subjectsUse a compact thumbnail when the eye can recognise the option faster than its name alone.

States

Every state below is the component held in that state for comparison. The open panel sits in the flow here so the page can hold it still; on a live surface it hangs from its wrap. The trigger's own rest, hover and focus are the Icon button's.

State	Specimen	What changes
Closed		Only the kebab shows; `aria-haspopup="menu"` promises the list before the press.
Open		The control carries `aria-expanded="true"`; the panel clamps to the viewport.
Item hover		The item's own rounded plate — two adjacent chosen items never merge into one bar.
Keyboard focus		Keyboard focus uses the standard inset outline. It never borrows the filled-and-checked treatment of a committed choice.
Current choice		When the menu sets a value, the current item wears the accent wash, weight, and the drawn check — read from `aria-checked`.
Destructive item		The error ink says the consequence before the press; hover answers with the error wash.

Clipped ownerIf the owning card clips overflow, the owner releases clipping and rises while the menu is open — opening the card body is never a prerequisite for seeing the menu.

Do and don't

Do

The kebab is the menu's action trigger — three dots promise a list of acts.

Don't

A chevron is a disclosure's mark — it promises that something here opens or expands, not that acts are hiding behind it.

Copy

Items are complete actsEach item reads as what pressing it does — verb and object where it acts, the value where it chooses.
Descriptions are short factsUse one supporting line only when the title alone cannot distinguish neighbouring options.
No product story in a specimenExamples demonstrate the component's structure with neutral labels rather than documenting a particular workflow.

Accessibility

Real menu rolesrole="menu" and menuitems; an item may be an anchor when it opens a page and still reads as an item.
Escape closes, focus returnsTo the control that opened it.
Scroll chains naturallyA genuinely long menu scrolls inside its viewport cap; at its boundary the page continues scrolling normally.
Clamped when neededOnly a list that exceeds the available room receives an internal scroll. Compact menus do not trap the page wheel.

When to reach for something else

Choosing a field's valueUse Dropdown — a menu behind a field face is that component.
A default action plus alternativesUse the Split button.
A phone task with no triggerUse the Sheet — that is its one legitimate home.

Markup

<span class="mk-menu-wrap">
  <button class="mk-icon-btn" type="button" aria-haspopup="menu"
          aria-expanded="false" aria-label="More actions">
    <svg data-mk-icon="more" aria-hidden="true"></svg>
  </button>
  <div class="mk-menu" role="menu" aria-label="Actions" hidden>
    <button class="mk-menu-item" role="menuitem" type="button">
      <svg data-mk-icon="copy" aria-hidden="true"></svg>
      <span class="mki-col">
        <span>First option</span>
        <span class="mki-note">Supporting description</span>
      </span>
    </button>
  </div>
</span>