Concorde documentation · same URL (interactive) · llms.txt

Concorde UI component — 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 Doc ID: core/components/ui/menu/menu. Keywords: Concorde, supersoniks, core/components/ui/menu/menu, menu, Menu, UI component, sonic-menu, web component, direction, sonic-menu-item, variant, shape, sonic-divider, more, href, pushstate, autoActive. URL: https://concorde.supersoniks.org/core/components/ui/menu.

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-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>

Direction

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

<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>

Size

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

<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>

Shadow

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

<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>

Align

align propagates to items except square / circle shape.

<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>

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-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>

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-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>

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 for type · variant · href · pushstate · autoActive and the item slots.