# Pop

## Placement
<sonic-code>
  <template>
    <sonic-pop class="inline-block" placement="left">
      <sonic-button>Left</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>
    <sonic-pop class="inline-block" placement="right">
      <sonic-button>Right</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>
    <sonic-pop class="inline-block" placement="top">
      <sonic-button>Top</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>
    <sonic-pop class="inline-block" placement="bottom">
      <sonic-button>Bottom</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>
  </template>
</sonic-code>

## Shadow
<sonic-code>
  <template>
    <sonic-pop class="inline-block" shadow="none" placement='top' >
      <sonic-button>None</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>
    <sonic-pop class="inline-block" shadow="sm"  placement='top'>
      <sonic-button>Small</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>
    <sonic-pop class="inline-block" shadow="md"  placement='top'>
      <sonic-button>Medium</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>
    <sonic-pop class="inline-block" shadow="lg"  placement='top'>
      <sonic-button>Large</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>
  </template>
</sonic-code>

## noToggle
<sonic-code>
  <template>
    <sonic-pop class="inline-block"  noToggle>
      <sonic-button>No toggle on click</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>
    <sonic-pop class="inline-block" >
      <sonic-button>Default toggle on click</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>
  </template>
</sonic-code>


## manual
<sonic-code>
  <template>
    <sonic-pop class="inline-block" manual id="manualPop">
      <sonic-button onclick="alert('customAction without opening Pop content')">Manual doesn't open on click</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item>Hourra !</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>
    <sonic-button onclick="document.getElementById('manualPop').show()" class="ml-5"  variant="outline">
      <sonic-icon name="sparkles" library="custom"></sonic-icon>
      Click to open pop
    </sonic-button>
  </template>
</sonic-code>