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

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

`OverflowMenu` provides a compact way to display a list of actions or options. It renders as a button that opens a dropdown menu when clicked, making it ideal for secondary actions or overflow content.

## Default

Create a basic overflow menu by wrapping `OverflowMenuItem` components within `OverflowMenu`.

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

## Flipped

Set `flipped` to `true` to position the menu to the left of the button.

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

Set `direction` to `"top"` to position the menu above the button.

<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

Enable the light variant by setting `light` to `true`.

<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

Set `size` to `"xl"` for an extra-large overflow menu.

<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

Set `size` to `"sm"` for a small overflow menu.

<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

Set `primaryFocus` to `true` on a menu item to focus it 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

Replace the default vertical overflow menu icon with a custom icon.

<OverflowMenu icon={Add}>
  <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

Use the `menu` slot to customize the trigger button content.

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

## Disabled items

Set `disabled` to `true` to disable menu items. Use `hasDivider` to add visual separation between items.

<OverflowMenu>
  <OverflowMenuItem text="Create key" />
  <OverflowMenuItem text="Import key" />
  <OverflowMenuItem text="Revoke key" disabled />
  <OverflowMenuItem text="Duplicate key" disabled />
  <OverflowMenuItem
    hasDivider
    href="https://cloud.ibm.com/docs/api-gateway/"
    text="API documentation"
  />
  <OverflowMenuItem hasDivider danger text="Delete service" />
</OverflowMenu>