# Menu

**`sonic-menu`** lays out navigation or actions as a **`direction`** row or column of **`sonic-menu-item`** entries (ghost **`variant`** and block **`shape`** by default), optional **`sonic-divider`** separators, and overflow content in the **`more`** slot (popover “…” trigger). Set `href` / `pushstate` / `autoActive` on each `sonic-menu-item` (same API as `sonic-button`), not on the menu host.

## Basic example

<sonic-code>
  <template>
    <sonic-menu direction="row">
      <sonic-menu-item variant="ghost">
        <sonic-icon library="iconoir" name="home" slot="prefix"></sonic-icon>
        Home
      </sonic-menu-item>
      <sonic-menu-item>
        <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
        Profile
      </sonic-menu-item>
      <sonic-menu-item type="danger">
        <sonic-icon library="iconoir" name="log-out" slot="prefix"></sonic-icon>
        Log out
      </sonic-menu-item>
    </sonic-menu>
  </template>
</sonic-code>

## Direction

Default **`direction`** is **`column`**. Use **`row`** for horizontal toolbars or tabs.

<sonic-code>
  <template>
    <sonic-menu direction="row">
      <sonic-menu-item variant="ghost">
        <sonic-icon library="iconoir" name="arrow-right" slot="prefix"></sonic-icon>
        Row
      </sonic-menu-item>
      <sonic-menu-item>
        <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
        Profile
      </sonic-menu-item>
      <sonic-menu-item>
        <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
        Flights
      </sonic-menu-item>
      <sonic-menu-item>
        <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
        Baggage
      </sonic-menu-item>
      <sonic-menu-item type="danger">
        <sonic-icon library="iconoir" name="log-out" slot="prefix"></sonic-icon>
        Log out
      </sonic-menu-item>
    </sonic-menu>
    <sonic-menu direction="column">
      <sonic-menu-item variant="ghost">
        <sonic-icon library="iconoir" name="arrow-down" slot="prefix"></sonic-icon>
        Column
      </sonic-menu-item>
      <sonic-menu-item>
        <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
        Profile
      </sonic-menu-item>
      <sonic-menu-item>
        <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
        Flights
      </sonic-menu-item>
      <sonic-menu-item>
        <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
        Baggage
      </sonic-menu-item>
      <sonic-menu-item type="danger">
        <sonic-icon library="iconoir" name="log-out" slot="prefix"></sonic-icon>
        Log out
      </sonic-menu-item>
    </sonic-menu>
  </template>
</sonic-code>

## Size

**`size`** on the menu propagates to items and the **`more`** trigger when they omit their own **`size`**.

<sonic-code>
  <template>
    <div class="grid gap-3">
      <sonic-menu size="xs" direction="row">
        <sonic-menu-item>XS</sonic-menu-item>
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
          Profile
        </sonic-menu-item>
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
          Flights
        </sonic-menu-item>
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
          Baggage
        </sonic-menu-item>
      </sonic-menu>
      <sonic-menu size="sm" direction="row">
        <sonic-menu-item>Small</sonic-menu-item>
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
          Profile
        </sonic-menu-item>
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
          Flights
        </sonic-menu-item>
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
          Baggage
        </sonic-menu-item>
      </sonic-menu>
      <sonic-menu direction="row">
        <sonic-menu-item>Medium</sonic-menu-item>
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
          Profile
        </sonic-menu-item>
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
          Flights
        </sonic-menu-item>
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
          Baggage
        </sonic-menu-item>
      </sonic-menu>
      <sonic-menu size="lg" direction="row">
        <sonic-menu-item>Large</sonic-menu-item>
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
          Profile
        </sonic-menu-item>
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
          Flights
        </sonic-menu-item>
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
          Baggage
        </sonic-menu-item>
      </sonic-menu>
      <sonic-menu size="xl" direction="row">
        <sonic-menu-item>XL</sonic-menu-item>
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
          Profile
        </sonic-menu-item>
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
          Flights
        </sonic-menu-item>
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
          Baggage
        </sonic-menu-item>
      </sonic-menu>
    </div>
  </template>
</sonic-code>

## Shadow

Optional **`shadow`** wraps the menu surface (no shadow when omitted).

<sonic-code>
  <template>
    <div class="grid gap-3">
      <sonic-menu direction="row">
        <sonic-menu-item>None</sonic-menu-item>
      </sonic-menu>
      <sonic-menu shadow="sm" direction="row">
        <sonic-menu-item>Small</sonic-menu-item>
      </sonic-menu>
      <sonic-menu shadow="md" direction="row">
        <sonic-menu-item>Medium</sonic-menu-item>
      </sonic-menu>
      <sonic-menu shadow="lg" direction="row">
        <sonic-menu-item>Large</sonic-menu-item>
      </sonic-menu>
    </div>
  </template>
</sonic-code>

## Align

**`align`** propagates to items except square / circle **`shape`**.

<sonic-code>
  <template>
    <div class="grid gap-3">
      <sonic-menu align="center">
        <sonic-menu-item variant="ghost">
          <sonic-icon library="iconoir" name="home"></sonic-icon>
          Home
        </sonic-menu-item>
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="user"></sonic-icon>
          Profile
        </sonic-menu-item>
      </sonic-menu>
      <sonic-menu align="left">
        <sonic-menu-item variant="ghost">
          <sonic-icon library="iconoir" name="home"></sonic-icon>
          Home
        </sonic-menu-item>
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="user"></sonic-icon>
          Profile
        </sonic-menu-item>
      </sonic-menu>
      <sonic-menu align="right">
        <sonic-menu-item variant="ghost">
          <sonic-icon library="iconoir" name="home"></sonic-icon>
          Home
        </sonic-menu-item>
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="user"></sonic-icon>
          Profile
        </sonic-menu-item>
      </sonic-menu>
    </div>
  </template>
</sonic-code>

## More

Assign nodes to **`slot="more"`** to show the overflow popover. The trigger appears only when the slot has content. Icon orientation follows **`direction`** (vertical ellipsis in a row menu).

<sonic-code>
  <template>
    <sonic-menu direction="row">
      <sonic-menu-item variant="ghost">
        <sonic-icon library="iconoir" name="home"></sonic-icon>
        Home
      </sonic-menu-item>
      <sonic-menu-item>
        <sonic-icon library="iconoir" name="user"></sonic-icon>
        Profile
      </sonic-menu-item>
      <sonic-menu-item>
        <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
        Flights
      </sonic-menu-item>
      <sonic-menu-item>
        <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
        Baggage
      </sonic-menu-item>
      <sonic-menu slot="more">
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="settings" slot="prefix"></sonic-icon>
          Settings
        </sonic-menu-item>
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="chat-bubble" slot="prefix"></sonic-icon>
          Messages
        </sonic-menu-item>
        <sonic-divider></sonic-divider>
        <sonic-menu-item type="danger">
          <sonic-icon library="iconoir" name="log-out" slot="prefix"></sonic-icon>
          Log out
        </sonic-menu-item>
      </sonic-menu>
    </sonic-menu>
  </template>
</sonic-code>

## Scrollable

With **`scrollable`**, the main slot scrolls with edge fade masks; drag-to-scroll works on pointer devices. When exactly one item is **`active`**, the menu scrolls it into view.

<sonic-code>
  <template>
    <sonic-menu direction="row" scrollable>
      <sonic-menu-item variant="ghost">
        <sonic-icon library="iconoir" name="home" slot="prefix"></sonic-icon>
        Home
      </sonic-menu-item>
      <sonic-menu-item>
        <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
        Profile
      </sonic-menu-item>
      <sonic-menu-item>
        <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
        Flights
      </sonic-menu-item>
      <sonic-menu-item>
        <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
        Baggage
      </sonic-menu-item>
      <sonic-menu-item variant="ghost">
        <sonic-icon library="iconoir" name="home" slot="prefix"></sonic-icon>
        Home
      </sonic-menu-item>
      <sonic-menu-item>
        <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
        Profile
      </sonic-menu-item>
      <sonic-menu-item>
        <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
        Flights
      </sonic-menu-item>
      <sonic-menu-item>
        <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
        Baggage
      </sonic-menu-item>
      <sonic-menu-item variant="ghost">
        <sonic-icon library="iconoir" name="home" slot="prefix"></sonic-icon>
        Home
      </sonic-menu-item>
      <sonic-menu-item>
        <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
        Profile
      </sonic-menu-item>
      <sonic-menu-item>
        <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
        Flights
      </sonic-menu-item>
      <sonic-menu-item>
        <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
        Baggage
      </sonic-menu-item>
      <sonic-menu-item>
        <sonic-icon library="iconoir" name="settings" slot="prefix"></sonic-icon>
        Settings
      </sonic-menu-item>
      <sonic-menu-item>
        <sonic-icon library="iconoir" name="chat-bubble" slot="prefix"></sonic-icon>
        Messages
      </sonic-menu-item>
      <sonic-menu slot="more">
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="settings" slot="prefix"></sonic-icon>
          Settings
        </sonic-menu-item>
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="chat-bubble" slot="prefix"></sonic-icon>
          Messages
        </sonic-menu-item>
        <sonic-divider></sonic-divider>
        <sonic-menu-item type="danger">
          <sonic-icon library="iconoir" name="log-out" slot="prefix"></sonic-icon>
          Log out
        </sonic-menu-item>
      </sonic-menu>
    </sonic-menu>
  </template>
</sonic-code>

## API reference

| Attribute | Values | Description |
|----------|---------|-------------|
| `direction` | `column` (default) · `row` | Vertical list or horizontal bar |
| `align` | `left` (default) · `center` · `right` | Alignment propagated to items (except square / circle **`shape`**) |
| `size` | `2xs` … `2xl` (default: items keep their own size) | Propagated to items and the **`more`** trigger when unset on the item |
| `shadow` | `none` · `sm` · `md` · `lg` | Shadow around the menu; none when omitted |
| `minWidth` | CSS length | Minimum width of the container (default `0`) |
| `scrollable` | boolean | Scroll with edge fade; auto-scroll when a single item is **`active`** |
| `moreShape` | `circle` (default) · `square` | Shape of the **`more`** slot trigger button |

| Slot | Description |
|------|-------------|
| *(default)* | Visible items: `sonic-menu-item` · `sonic-divider` · nested `sonic-menu` |
| `more` | Popover content for the “…” control; shown only when the slot has assigned nodes |

**`sonic-menu-item`** extends **`sonic-button`** (defaults `variant="ghost"` and `shape="block"`). See [Button](/core/components/ui/button) for `type` · `variant` · `href` · `pushstate` · `autoActive` and the item slots.