# Menu

## Direction
<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>
        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>
  </template>
</sonic-code>

## 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>
          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>
  </template>
</sonic-code>

## Shadow
<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
<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>



## More
<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>
        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>
  </template>
</sonic-code>

## Scrollable
<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>
        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>
      
  </template>
</sonic-code>