Dropdown

Provides a button that toggles a list of selectable options (dropdown items).

First release: 1.0.0 Latest update: July 1, 2025 Current version: 1.0.0

React

Angular

Vue

Svelte

HTML

Import

import { PlusDropdown } from '@plusui/react';

import { PlusDropdownComponent } from '@plusui/angular';

import { PlusDropdown } from '@plusui/vue';

import PlusDropdown from '@plusui/svelte';

<script src="https://cdn.jsdelivr.net/npm/@plusui/core"></script>

Package

@plusui/react

@plusui/angular

@plusui/vue

@plusui/svelte

@plusui/core

Usage

<PlusDropdown />

<plus-dropdown />

<plus-dropdown />

<PlusDropdown />

<plus-dropdown />

Docs

Changelog

Dropdown Changelog

Recent changes and updates for the dropdown component

v1.0.0

June 20, 2025

Feat

Added Dropdown component for menus

Customizable trigger elements
Multiple positioning options
Keyboard navigation
Accessibility support

The Dropdown component consists of a trigger button (plus-button) and a panel (dropdown-box) containing a list of options (plus-dropdown-item). Clicking the button toggles the visibility of the panel.

Anatomy

Usage

Basic Example

A dropdown requires a trigger (implicitly a plus-button) and plus-dropdown-item elements placed within the dropdown-item slot.

Select OptionOption 1

Option 2

Option 3

Show code

import { PlusDropdown, PlusDropdownItem } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusDropdown>
        Select Option
        <PlusDropdownItem text="Option 1">
          Option 1
        </PlusDropdownItem>
        <PlusDropdownItem text="Option 2">
          Option 2
        </PlusDropdownItem>
        <PlusDropdownItem text="Option 3">
          Option 3
        </PlusDropdownItem>
      </PlusDropdown>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-dropdown>
      Select Option
      <plus-dropdown-item text="Option 1">
        Option 1
      </plus-dropdown-item>
      <plus-dropdown-item text="Option 2">
        Option 2
      </plus-dropdown-item>
      <plus-dropdown-item text="Option 3">
        Option 3
      </plus-dropdown-item>
    </plus-dropdown>
  `
})
export class ExampleComponent {}

<template>
  <plus-dropdown>
    Select Option
    <plus-dropdown-item text="Option 1">
      Option 1
    </plus-dropdown-item>
    <plus-dropdown-item text="Option 2">
      Option 2
    </plus-dropdown-item>
    <plus-dropdown-item text="Option 3">
      Option 3
    </plus-dropdown-item>
  </plus-dropdown>
</template>

<plus-dropdown>
  Select Option
  <plus-dropdown-item text="Option 1">
    Option 1
  </plus-dropdown-item>
  <plus-dropdown-item text="Option 2">
    Option 2
  </plus-dropdown-item>
  <plus-dropdown-item text="Option 3">
    Option 3
  </plus-dropdown-item>
</plus-dropdown>

<plus-dropdown>
  Select Option
  <plus-dropdown-item text="Option 1">
    Option 1
  </plus-dropdown-item>
  <plus-dropdown-item text="Option 2">
    Option 2
  </plus-dropdown-item>
  <plus-dropdown-item text="Option 3">
    Option 3
  </plus-dropdown-item>
</plus-dropdown>

Trigger Button Appearance (`kind`, `status`, `size`)

Customize the appearance of the trigger button using the kind, status, and size props. These props are passed down to the internal plus-button.

Outlined Primary SMItem A

Item B

Dashed Success MDItem A

Item B

Text Danger LGItem A

Item B

Show code

import { PlusDropdown, PlusDropdownItem } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusDropdown kind="outlined" status="primary" size="sm">
        Outlined Primary SM
        <PlusDropdownItem>
          Item A
        </PlusDropdownItem>
        <PlusDropdownItem>
          Item B
        </PlusDropdownItem>
      </PlusDropdown>
      <PlusDropdown kind="dashed" status="success" size="md">
        Dashed Success MD
        <PlusDropdownItem>
          Item A
        </PlusDropdownItem>
        <PlusDropdownItem>
          Item B
        </PlusDropdownItem>
      </PlusDropdown>
      <PlusDropdown kind="text" status="danger" size="lg">
        Text Danger LG
        <PlusDropdownItem>
          Item A
        </PlusDropdownItem>
        <PlusDropdownItem>
          Item B
        </PlusDropdownItem>
      </PlusDropdown>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-dropdown kind="outlined" status="primary" size="sm">
      Outlined Primary SM
      <plus-dropdown-item>
        Item A
      </plus-dropdown-item>
      <plus-dropdown-item>
        Item B
      </plus-dropdown-item>
    </plus-dropdown>
    <plus-dropdown kind="dashed" status="success" size="md">
      Dashed Success MD
      <plus-dropdown-item>
        Item A
      </plus-dropdown-item>
      <plus-dropdown-item>
        Item B
      </plus-dropdown-item>
    </plus-dropdown>
    <plus-dropdown kind="text" status="danger" size="lg">
      Text Danger LG
      <plus-dropdown-item>
        Item A
      </plus-dropdown-item>
      <plus-dropdown-item>
        Item B
      </plus-dropdown-item>
    </plus-dropdown>
  `
})
export class ExampleComponent {}

<template>
  <plus-dropdown kind="outlined" status="primary" size="sm">
    Outlined Primary SM
    <plus-dropdown-item>
      Item A
    </plus-dropdown-item>
    <plus-dropdown-item>
      Item B
    </plus-dropdown-item>
  </plus-dropdown>
  <plus-dropdown kind="dashed" status="success" size="md">
    Dashed Success MD
    <plus-dropdown-item>
      Item A
    </plus-dropdown-item>
    <plus-dropdown-item>
      Item B
    </plus-dropdown-item>
  </plus-dropdown>
  <plus-dropdown kind="text" status="danger" size="lg">
    Text Danger LG
    <plus-dropdown-item>
      Item A
    </plus-dropdown-item>
    <plus-dropdown-item>
      Item B
    </plus-dropdown-item>
  </plus-dropdown>
</template>

<plus-dropdown kind="outlined" status="primary" size="sm">
  Outlined Primary SM
  <plus-dropdown-item>
    Item A
  </plus-dropdown-item>
  <plus-dropdown-item>
    Item B
  </plus-dropdown-item>
</plus-dropdown>
<plus-dropdown kind="dashed" status="success" size="md">
  Dashed Success MD
  <plus-dropdown-item>
    Item A
  </plus-dropdown-item>
  <plus-dropdown-item>
    Item B
  </plus-dropdown-item>
</plus-dropdown>
<plus-dropdown kind="text" status="danger" size="lg">
  Text Danger LG
  <plus-dropdown-item>
    Item A
  </plus-dropdown-item>
  <plus-dropdown-item>
    Item B
  </plus-dropdown-item>
</plus-dropdown>

<plus-dropdown kind="outlined" status="primary" size="sm">
  Outlined Primary SM
  <plus-dropdown-item>
    Item A
  </plus-dropdown-item>
  <plus-dropdown-item>
    Item B
  </plus-dropdown-item>
</plus-dropdown>
<plus-dropdown kind="dashed" status="success" size="md">
  Dashed Success MD
  <plus-dropdown-item>
    Item A
  </plus-dropdown-item>
  <plus-dropdown-item>
    Item B
  </plus-dropdown-item>
</plus-dropdown>
<plus-dropdown kind="text" status="danger" size="lg">
  Text Danger LG
  <plus-dropdown-item>
    Item A
  </plus-dropdown-item>
  <plus-dropdown-item>
    Item B
  </plus-dropdown-item>
</plus-dropdown>

Disabled States

The entire dropdown can be disabled using the disabled prop on plus-dropdown. Individual items can be disabled using the disabled prop on plus-dropdown-item.

Disabled DropdownCannot select

Dropdown with Disabled ItemOption 1

Option 2 (Disabled)

Option 3

Show code

import { PlusDropdown, PlusDropdownItem } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusDropdown disabled>
        Disabled Dropdown
        <PlusDropdownItem>
          Cannot select
        </PlusDropdownItem>
      </PlusDropdown>
      <PlusDropdown>
        Dropdown with Disabled Item
        <PlusDropdownItem>
          Option 1
        </PlusDropdownItem>
        <PlusDropdownItem disabled>
          Option 2 (Disabled)
        </PlusDropdownItem>
        <PlusDropdownItem>
          Option 3
        </PlusDropdownItem>
      </PlusDropdown>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-dropdown disabled>
      Disabled Dropdown
      <plus-dropdown-item>
        Cannot select
      </plus-dropdown-item>
    </plus-dropdown>
    <plus-dropdown>
      Dropdown with Disabled Item
      <plus-dropdown-item>
        Option 1
      </plus-dropdown-item>
      <plus-dropdown-item disabled>
        Option 2 (Disabled)
      </plus-dropdown-item>
      <plus-dropdown-item>
        Option 3
      </plus-dropdown-item>
    </plus-dropdown>
  `
})
export class ExampleComponent {}

<template>
  <plus-dropdown disabled>
    Disabled Dropdown
    <plus-dropdown-item>
      Cannot select
    </plus-dropdown-item>
  </plus-dropdown>
  <plus-dropdown>
    Dropdown with Disabled Item
    <plus-dropdown-item>
      Option 1
    </plus-dropdown-item>
    <plus-dropdown-item disabled>
      Option 2 (Disabled)
    </plus-dropdown-item>
    <plus-dropdown-item>
      Option 3
    </plus-dropdown-item>
  </plus-dropdown>
</template>

<plus-dropdown disabled>
  Disabled Dropdown
  <plus-dropdown-item>
    Cannot select
  </plus-dropdown-item>
</plus-dropdown>
<plus-dropdown>
  Dropdown with Disabled Item
  <plus-dropdown-item>
    Option 1
  </plus-dropdown-item>
  <plus-dropdown-item disabled>
    Option 2 (Disabled)
  </plus-dropdown-item>
  <plus-dropdown-item>
    Option 3
  </plus-dropdown-item>
</plus-dropdown>

<plus-dropdown disabled>
  Disabled Dropdown
  <plus-dropdown-item>
    Cannot select
  </plus-dropdown-item>
</plus-dropdown>
<plus-dropdown>
  Dropdown with Disabled Item
  <plus-dropdown-item>
    Option 1
  </plus-dropdown-item>
  <plus-dropdown-item disabled>
    Option 2 (Disabled)
  </plus-dropdown-item>
  <plus-dropdown-item>
    Option 3
  </plus-dropdown-item>
</plus-dropdown>

Trigger Content (Slots & Prop)

Customize the trigger button’s content using the default slot. Use the suffix slot for content on the right (like an additional icon). The text prop can be used as an alternative to the default slot.

My Account

Profile

Settings

Options via SlotAction 1

Show code

import { PlusDropdown, PlusIcon, PlusDropdownItem } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusDropdown>
        <PlusIcon iconName="user" style="margin-right: 0.5em">
        </PlusIcon>
        <p>
          My Account
        </p>
        <PlusDropdownItem>
          Profile
        </PlusDropdownItem>
        <PlusDropdownItem>
          Settings
        </PlusDropdownItem>
      </PlusDropdown>
      <PlusDropdown>
        Options via Slot
        <PlusDropdownItem>
          Action 1
        </PlusDropdownItem>
      </PlusDropdown>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-dropdown>
      <plus-icon icon-name="user" style="margin-right: 0.5em">
      </plus-icon>
      <p>
        My Account
      </p>
      <plus-dropdown-item>
        Profile
      </plus-dropdown-item>
      <plus-dropdown-item>
        Settings
      </plus-dropdown-item>
    </plus-dropdown>
    <plus-dropdown>
      Options via Slot
      <plus-dropdown-item>
        Action 1
      </plus-dropdown-item>
    </plus-dropdown>
  `
})
export class ExampleComponent {}

<template>
  <plus-dropdown>
    <plus-icon icon-name="user" style="margin-right: 0.5em">
    </plus-icon>
    <p>
      My Account
    </p>
    <plus-dropdown-item>
      Profile
    </plus-dropdown-item>
    <plus-dropdown-item>
      Settings
    </plus-dropdown-item>
  </plus-dropdown>
  <plus-dropdown>
    Options via Slot
    <plus-dropdown-item>
      Action 1
    </plus-dropdown-item>
  </plus-dropdown>
</template>

<plus-dropdown>
  <plus-icon icon-name="user" style="margin-right: 0.5em">
  </plus-icon>
  <p>
    My Account
  </p>
  <plus-dropdown-item>
    Profile
  </plus-dropdown-item>
  <plus-dropdown-item>
    Settings
  </plus-dropdown-item>
</plus-dropdown>
<plus-dropdown>
  Options via Slot
  <plus-dropdown-item>
    Action 1
  </plus-dropdown-item>
</plus-dropdown>

<plus-dropdown>
  <plus-icon icon-name="user" style="margin-right: 0.5em">
  </plus-icon>
  <p>
    My Account
  </p>
  <plus-dropdown-item>
    Profile
  </plus-dropdown-item>
  <plus-dropdown-item>
    Settings
  </plus-dropdown-item>
</plus-dropdown>
<plus-dropdown>
  Options via Slot
  <plus-dropdown-item>
    Action 1
  </plus-dropdown-item>
</plus-dropdown>

Handling Selection

Listen for the plus-dropdown-selected-item event to get the selected plus-dropdown-item element when an option is chosen.

Selected: None

Show code

import { PlusDropdown, PlusDropdownItem } from '@plusui/react';
import { useState } from 'react';

export default () => {
  const [selectedColor, setSelectedColor] = useState('None');

  const handleSelect = (event) => {
    const selectedItem = event.detail.selectedItem;
    setSelectedColor(selectedItem.text || selectedItem.textContent);
  };

  return (
    <>
      <PlusDropdown onPlusDropdownSelectedItem={handleSelect}>
        Choose Color
        <PlusDropdownItem text="Red">Red</PlusDropdownItem>
        <PlusDropdownItem text="Green">Green</PlusDropdownItem>
        <PlusDropdownItem text="Blue">Blue</PlusDropdownItem>
      </PlusDropdown>
      <p>Selected: {selectedColor}</p>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-dropdown-selection',
  template: `
    <plus-dropdown (plus-dropdown-selected-item)="handleSelect($event)">
      Choose Color
      <plus-dropdown-item text="Red">Red</plus-dropdown-item>
      <plus-dropdown-item text="Green">Green</plus-dropdown-item>
      <plus-dropdown-item text="Blue">Blue</plus-dropdown-item>
    </plus-dropdown>
    <p>Selected: {{selectedColor}}</p>
  `
})
export class DropdownSelectionComponent {
  selectedColor = 'None';

  handleSelect(event: CustomEvent) {
    const selectedItem = event.detail.selectedItem;
    this.selectedColor = selectedItem.text || selectedItem.textContent;
  }
}

<template>
  <plus-dropdown @plus-dropdown-selected-item="handleSelect">
    Choose Color
    <plus-dropdown-item text="Red">Red</plus-dropdown-item>
    <plus-dropdown-item text="Green">Green</plus-dropdown-item>
    <plus-dropdown-item text="Blue">Blue</plus-dropdown-item>
  </plus-dropdown>
  <p>Selected: {{selectedColor}}</p>
</template>

<script setup>
import { ref } from 'vue';

const selectedColor = ref('None');

const handleSelect = (event) => {
  const selectedItem = event.detail.selectedItem;
  selectedColor.value = selectedItem.text || selectedItem.textContent;
};
</script>

<script>
  import { onMount } from 'svelte';

  let selectedColor = 'None';
  let dropdownRef;

  onMount(() => {
    if (dropdownRef) {
      dropdownRef.addEventListener('plus-dropdown-selected-item', (event) => {
        const selectedItem = event.detail.selectedItem;
        selectedColor = selectedItem.text || selectedItem.textContent;
      });
    }
  });
</script>

<plus-dropdown bind:this={dropdownRef}>
  Choose Color
  <plus-dropdown-item text="Red">Red</plus-dropdown-item>
  <plus-dropdown-item text="Green">Green</plus-dropdown-item>
  <plus-dropdown-item text="Blue">Blue</plus-dropdown-item>
</plus-dropdown>
<p>Selected: {selectedColor}</p>

<plus-dropdown id="selection-dropdown-html">
  Choose Color
  <plus-dropdown-item text="Red">Red</plus-dropdown-item>
  <plus-dropdown-item text="Green">Green</plus-dropdown-item>
  <plus-dropdown-item text="Blue">Blue</plus-dropdown-item>
</plus-dropdown>
<p>Selected: <span id="selected-color-html">None</span></p>

<script>
  const dropdown = document.getElementById('selection-dropdown-html');
  const display = document.getElementById('selected-color-html');

  dropdown.addEventListener('plus-dropdown-selected-item', (event) => {
    const selectedItem = event.detail.selectedItem;
    display.textContent = selectedItem.text || selectedItem.textContent;
  });
</script>

Show console

Visual Sections

Layout & Spacing

Light & Dark Mode

Keyboard Behavior:
- The trigger button is focusable (Tab).
- Pressing Enter or Space on the button opens/closes the dropdown.
- When the dropdown is open:
  - ArrowDown / ArrowUp navigates through focusable items.
  - Enter or Space selects the focused item and closes the dropdown.
  - Escape closes the dropdown without selection.
  - Typing letters generally focuses the next item starting with that letter (browser implementation may vary).
Screen Reader:
- The trigger button uses role="button", aria-haspopup="listbox", and aria-expanded to indicate its function and state.
- aria-controls links the button to the dropdown panel (role="listbox").
- Dropdown items use role="option", aria-selected, and aria-disabled.
- Ensure items have meaningful text content either via the slot or the text prop.
Required Developer Actions:
- Provide clear and concise text for the trigger button (via slot or text prop).
- Ensure each plus-dropdown-item has meaningful content.
- If using custom content within items, ensure it’s accessible.

Design System

Plus UI Design System on Figma

Visit

API Reference

Properties (`plus-dropdown`)

Name	Type	Default	Description	Required
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Sets the size of the trigger button and influences item size.	No
`status`	`'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'default'`	Sets the status/color variant of the trigger button.	No
`kind`	`'filled' \| 'outlined' \| 'dashed' \| 'text'`	`'filled'`	Sets the visual style of the trigger button.	No
`disabled`	`boolean`	`false`	Disables the dropdown interaction (trigger button).	No
`text`	`string`	`undefined`	Sets the text content of the trigger button (alternative to default slot).	No

Properties (`plus-dropdown-item`)

Name	Type	Default	Description	Required
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Sets the size of the dropdown item (usually matches dropdown size).	No
`disabled`	`boolean`	`false`	Disables the item, making it non-selectable.	No
`selected`	`boolean`	`false`	Indicates if the item is currently selected (managed by parent dropdown).	No
`text`	`string`	`undefined`	Text content for the item (alternative to slot), used for `aria-label`.	No

Events (`plus-dropdown`)

Name	Payload Type	Description
`plus-dropdown-open`	`CustomEvent<void>`	Fired when the dropdown panel opens.
`plus-dropdown-close`	`CustomEvent<void>`	Fired when the dropdown panel closes.
`plus-dropdown-selected-item`	`CustomEvent<{ selectedItem: HTMLElement }>`	Fired when an item is selected. `detail.selectedItem` is the selected `plus-dropdown-item` element.

Slots (`plus-dropdown`)

Name	Description
`default` (unnamed)	Content for the trigger button (overrides `text` prop).
`suffix`	Content placed to the right of the trigger button content.
`dropdown-item`	Container for `plus-dropdown-item` elements.

Slots (`plus-dropdown-item`)

Name	Description
`default` (unnamed)	The main content displayed within the item.

CSS Shadow Parts (`plus-dropdown`)

Part	Description
`base`	The main wrapper element.
`button`	The trigger button (`plus-button`).
`dropdown-box`	The dropdown panel container (`div`).

CSS Shadow Parts (`plus-dropdown-item`)

Part	Description
`base`	The base wrapper of the item (`div` or host).
`item`	The listbox item element (`plus-list-box-item`).

CSS Custom Properties (`plus-dropdown-item`)

Name	Description
`--i-bg-default`	Default background color.
`--i-bg-hovered`	Background color on hover.
`--i-bg-pressed`	Background color when pressed/active.
`--i-text-color`	Text color.
`--i-selected-bg`	Background color when selected.

Join the Community

Plus UI is built by the community. Join us on our platforms to contribute, get help, and stay up to date.

Figma GitHub Discord Twitter Open Collective

Dropdown

Import

Package

Usage

Docs

Changelog

Dropdown Changelog

v1.0.0

Added Dropdown component for menus

Anatomy

Usage

Basic Example

Trigger Button Appearance (kind, status, size)

Disabled States

Trigger Content (Slots & Prop)

Handling Selection

Visual Sections

Layout & Spacing

Light & Dark Mode

Accessibility (a11y)

Design System

API Reference

Properties (plus-dropdown)

Properties (plus-dropdown-item)

Events (plus-dropdown)

Slots (plus-dropdown)

Slots (plus-dropdown-item)

CSS Shadow Parts (plus-dropdown)

CSS Shadow Parts (plus-dropdown-item)

CSS Custom Properties (plus-dropdown-item)

Join the Community

Trigger Button Appearance (`kind`, `status`, `size`)

Properties (`plus-dropdown`)

Properties (`plus-dropdown-item`)

Events (`plus-dropdown`)

Slots (`plus-dropdown`)

Slots (`plus-dropdown-item`)

CSS Shadow Parts (`plus-dropdown`)

CSS Shadow Parts (`plus-dropdown-item`)

CSS Custom Properties (`plus-dropdown-item`)