Dropdown Button

The dropdown button combines a single button with a dropdown menu. Clicking the button toggles a menu of actions or options. It follows M3 Material Design, keeping a compact control while exposing related actions on demand.

Overview API

Usage

The dropdown button combines a single button with a dropdown menu. Clicking the button opens a menu of actions, reducing visual clutter while keeping options accessible.

Actions Edit Duplicate Archive Delete 

  <wc-dropdown-button>
    Actions
    <wc-menu-item slot="menu">Edit</wc-menu-item>
    <wc-menu-item slot="menu">Duplicate</wc-menu-item>
    <wc-menu-item slot="menu">Archive</wc-menu-item>
    <wc-menu-item slot="menu">Delete</wc-menu-item>
  </wc-dropdown-button>

Variants

The dropdown button supports filled, tonal, outlined, text, and elevated variants, following M3 Material Design guidelines.

Filled Option A Option B Tonal Option A Option B Outlined Option A Option B Text Option A Option B Elevated Option A Option B 

  <wc-dropdown-button variant="filled">
    Filled
    <wc-menu-item slot="menu">Option A</wc-menu-item>
    <wc-menu-item slot="menu">Option B</wc-menu-item>
  </wc-dropdown-button>

  <wc-dropdown-button variant="tonal">
    Tonal
    <wc-menu-item slot="menu">Option A</wc-menu-item>
    <wc-menu-item slot="menu">Option B</wc-menu-item>
  </wc-dropdown-button>

  <wc-dropdown-button variant="outlined">
    Outlined
    <wc-menu-item slot="menu">Option A</wc-menu-item>
    <wc-menu-item slot="menu">Option B</wc-menu-item>
  </wc-dropdown-button>

  <wc-dropdown-button variant="text">
    Text
    <wc-menu-item slot="menu">Option A</wc-menu-item>
    <wc-menu-item slot="menu">Option B</wc-menu-item>
  </wc-dropdown-button>

  <wc-dropdown-button variant="elevated">
    Elevated
    <wc-menu-item slot="menu">Option A</wc-menu-item>
    <wc-menu-item slot="menu">Option B</wc-menu-item>
  </wc-dropdown-button>

Colors

Dropdown buttons come in different colors to convey context or match your design system.

Primary Option Secondary Option Tertiary Option Success Option Danger Option Surface Option 

  <wc-dropdown-button color="primary">
    Primary
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-dropdown-button>

  <wc-dropdown-button color="secondary">
    Secondary
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-dropdown-button>

  <wc-dropdown-button color="tertiary">
    Tertiary
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-dropdown-button>

  <wc-dropdown-button color="success">
    Success
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-dropdown-button>

  <wc-dropdown-button color="danger">
    Danger
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-dropdown-button>

  <wc-dropdown-button color="surface">
    Surface
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-dropdown-button>

Sizes

Fancy larger or smaller dropdown buttons? Add the size attribute for additional sizes.

Extra small Option Small Option Medium Option Large Option Extra large Option 

  <wc-dropdown-button size="xs">
    Extra small
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-dropdown-button>

  <wc-dropdown-button size="sm">
    Small
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-dropdown-button>

  <wc-dropdown-button size="md">
    Medium
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-dropdown-button>

  <wc-dropdown-button size="lg">
    Large
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-dropdown-button>

  <wc-dropdown-button size="xl">
    Extra large
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-dropdown-button>

States

The dropdown button can be disabled to prevent user interaction.

Enabled Option A Option B Disabled Option A Option B 

  <wc-dropdown-button>
    Enabled
    <wc-menu-item slot="menu">Option A</wc-menu-item>
    <wc-menu-item slot="menu">Option B</wc-menu-item>
  </wc-dropdown-button>

  <wc-dropdown-button disabled="true">
    Disabled
    <wc-menu-item slot="menu">Option A</wc-menu-item>
    <wc-menu-item slot="menu">Option B</wc-menu-item>
  </wc-dropdown-button>

Placements

The dropdown menu can be positioned relative to the button using the placement attribute.

Bottom Start Option A Option B Bottom End Option A Option B Top Start Option A Option B Top End Option A Option B 

  <wc-dropdown-button placement="bottom-start">
    Bottom Start
    <wc-menu-item slot="menu">Option A</wc-menu-item>
    <wc-menu-item slot="menu">Option B</wc-menu-item>
  </wc-dropdown-button>

  <wc-dropdown-button placement="bottom-end">
    Bottom End
    <wc-menu-item slot="menu">Option A</wc-menu-item>
    <wc-menu-item slot="menu">Option B</wc-menu-item>
  </wc-dropdown-button>

  <wc-dropdown-button placement="top-start">
    Top Start
    <wc-menu-item slot="menu">Option A</wc-menu-item>
    <wc-menu-item slot="menu">Option B</wc-menu-item>
  </wc-dropdown-button>

  <wc-dropdown-button placement="top-end">
    Top End
    <wc-menu-item slot="menu">Option A</wc-menu-item>
    <wc-menu-item slot="menu">Option B</wc-menu-item>
  </wc-dropdown-button>

On this page

  • Usage
  • Variants
  • Colors
  • Sizes
  • States
  • Placements
Sponsor

Properties

Events

Methods

CSS Custom Properties