---
components: ["OverflowMenu", "OverflowMenuItem"]
---

<script>
  import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
  import Add16 from "carbon-icons-svelte/lib/Add16";
  import Preview from "../../components/Preview.svelte";
</script>

### Default

<OverflowMenu>
  <OverflowMenuItem text="Manage credentials" />
  <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
  <OverflowMenuItem danger text="Delete service" />
</OverflowMenu>

### Flipped

<OverflowMenu open flipped>
  <OverflowMenuItem text="Manage credentials" />
  <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
  <OverflowMenuItem danger text="Delete service" />
</OverflowMenu>

### Menu direction top

<OverflowMenu flipped direction="top">
  <OverflowMenuItem text="Manage credentials" />
  <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
  <OverflowMenuItem danger text="Delete service" />
</OverflowMenu>

### Light variant

<OverflowMenu light>
  <OverflowMenuItem text="Manage credentials" />
  <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
  <OverflowMenuItem danger text="Delete service" />
</OverflowMenu>

### Extra-large size

<OverflowMenu size="xl">
  <OverflowMenuItem text="Manage credentials" />
  <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
  <OverflowMenuItem danger text="Delete service" />
</OverflowMenu>

### Small size

<OverflowMenu size="sm">
  <OverflowMenuItem text="Manage credentials" />
  <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
  <OverflowMenuItem danger text="Delete service" />
</OverflowMenu>

### Custom primary focus

By default, the first overflow menu item is focused when opening the dropdown.

<OverflowMenu>
  <OverflowMenuItem text="Manage credentials" />
  <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
  <OverflowMenuItem primaryFocus danger text="Delete service" />
</OverflowMenu>

### Custom trigger icon

<OverflowMenu icon={Add16}>
  <OverflowMenuItem text="Manage credentials" />
  <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
  <OverflowMenuItem danger text="Delete service" />
</OverflowMenu>

### Custom trigger slot

<OverflowMenu style="width: auto;">
  <div slot="menu" style="padding: 1rem; color: red;">Custom trigger</div>
  <OverflowMenuItem text="Manage credentials" />
  <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
  <OverflowMenuItem danger text="Delete service" />
</OverflowMenu>