webawesome/docs/components/dropdown.md

Dropdown

<sl-dropdown>
  <sl-button slot="trigger" caret>Dropdown</sl-button>
  <sl-dropdown-item>Dropdown Item 1</sl-dropdown-item>
  <sl-dropdown-item>Dropdown Item 2</sl-dropdown-item>
  <sl-dropdown-item>Dropdown Item 3</sl-dropdown-item>
  <sl-dropdown-divider></sl-dropdown-divider>
  <sl-dropdown-item checked>Checked</sl-dropdown-item>
  <sl-dropdown-item disabled>Disabled</sl-dropdown-item>
  <sl-dropdown-divider></sl-dropdown-divider>
  <sl-dropdown-item>
    Prefix
    <sl-icon slot="prefix" name="gift"></sl-icon>
  </sl-dropdown-item>
  <sl-dropdown-item>
    Suffix Icon
    <sl-icon slot="suffix" name="heart"></sl-icon>
  </sl-dropdown-item>
</sl-dropdown>

<sl-dropdown>
  <sl-button slot="trigger" caret>Edit</sl-button>
  <sl-dropdown-item>Cut</sl-dropdown-item>
  <sl-dropdown-item>Copy</sl-dropdown-item>
  <sl-dropdown-item>Paste</sl-dropdown-item>
  <sl-dropdown-divider></sl-dropdown-divider>
  <sl-dropdown-item>Find</sl-dropdown-item>
  <sl-dropdown-item>Replace</sl-dropdown-item>
</sl-dropdown>

<sl-dropdown>
  <sl-button slot="trigger" caret>Scrolling Menu</sl-button>
  <sl-dropdown-item>Item 1</sl-dropdown-item>
  <sl-dropdown-item>Item 2</sl-dropdown-item>
  <sl-dropdown-item>Item 3</sl-dropdown-item>
  <sl-dropdown-item>Item 4</sl-dropdown-item>
  <sl-dropdown-item>Item 5</sl-dropdown-item>
  <sl-dropdown-item>Item 6</sl-dropdown-item>
  <sl-dropdown-item>Item 7</sl-dropdown-item>
  <sl-dropdown-item>Item 8</sl-dropdown-item>
  <sl-dropdown-item>Item 9</sl-dropdown-item>
  <sl-dropdown-item>Item 10</sl-dropdown-item>
  <sl-dropdown-item>Item 11</sl-dropdown-item>
  <sl-dropdown-item>Item 12</sl-dropdown-item>
  <sl-dropdown-item>Item 13</sl-dropdown-item>
  <sl-dropdown-item>Item 14</sl-dropdown-item>
  <sl-dropdown-item>Item 15</sl-dropdown-item>
  <sl-dropdown-item>Item 16</sl-dropdown-item>
  <sl-dropdown-item>Item 17</sl-dropdown-item>
  <sl-dropdown-item>Item 18</sl-dropdown-item>
  <sl-dropdown-item>Item 19</sl-dropdown-item>
  <sl-dropdown-item>Item 20</sl-dropdown-item>
</sl-dropdown>

[component-metadata:sl-dropdown]