Component

Dropdown

Action menu and select dropdown. Use for actions and selection from a list.

tsx
import { Dropdown, SelectDropdown } from 'wss3-forge'

Usage

Dropdown for action menus

SelectDropdown for form selection

Add icons for visual recognition

Use destructive for dangerous actions

Group related items with categories


Examples

Action Menu

tsx
1<Dropdown
2 trigger={<Button variant="secondary">Actions</Button>}
3 items={[
4 { id: 'edit', label: 'Edit', icon: <Edit20Regular /> },
5 { id: 'copy', label: 'Copy', icon: <Copy20Regular /> },
6 { id: 'share', label: 'Share', icon: <Share20Regular /> },
7 { id: 'divider', divider: true },
8 { id: 'delete', label: 'Delete', icon: <Delete20Regular />, destructive: true }
9 ]}
10/>

With Categories

tsx
1<Dropdown
2 trigger={<IconButton icon={<MoreHorizontal20Regular />} />}
3 categories={[
4 {
5 label: 'Edit',
6 items: [
7 { id: 'edit', label: 'Edit' },
8 { id: 'duplicate', label: 'Duplicate' }
9 ]
10 },
11 {
12 label: 'Danger Zone',
13 items: [
14 { id: 'archive', label: 'Archive' },
15 { id: 'delete', label: 'Delete', destructive: true }
16 ]
17 }
18 ]}
19/>

Previous

CommandBar

Next

Modal

Last updated: December 2025

Cookies

We use cookies to improve your experience and save your preferences.