Concorde documentation (crawl) · interactive version

Concorde UI component — Menu. Row Doc ID: core/components/ui/menu/menu. Keywords: Concorde, supersoniks, core/components/ui/menu/menu, menu, Menu, UI component, sonic-menu, web component. URL: https://concorde.supersoniks.org/crawl/core/components/ui/menu/menu.html.

Menu

Direction

<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>
        History
      </sonic-menu-item>
      <sonic-menu-item >
        <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
        Orders
      </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>
        History
      </sonic-menu-item>
      <sonic-menu-item >
        <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
        Orders
      </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

<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>
          History
        </sonic-menu-item>
        <sonic-menu-item >
          <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
          Orders
        </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>
          History
        </sonic-menu-item>
        <sonic-menu-item >
          <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
          Orders
        </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>
          History
        </sonic-menu-item>
        <sonic-menu-item >
          <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
          Orders
        </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>
          History
        </sonic-menu-item>
        <sonic-menu-item >
          <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
          Orders
        </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>
          History
        </sonic-menu-item>
        <sonic-menu-item >
          <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
          Orders
        </sonic-menu-item>
      </sonic-menu>
    </div>

Shadow

<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

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

More

<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>
        History
      </sonic-menu-item>
      <sonic-menu-item >
        <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
        Orders
      </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

<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>
        History
      </sonic-menu-item>
      <sonic-menu-item >
        <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
        Orders
      </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>
        History
      </sonic-menu-item>
      <sonic-menu-item >
        <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
        Orders
      </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>
        History
      </sonic-menu-item>
      <sonic-menu-item >
        <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
        Orders
      </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>