Dropdown

A menu that appears when triggered, displaying a list of actions.

Basic Usage

Edit Duplicate Delete
dart
1
2
3
4
5
6
7
8
DDropdown(
  trigger: DButton(label: 'Options'),
  items: [
    DDropdownItem(label: 'Edit', href: '/edit'),
    DDropdownItem(label: 'Duplicate', href: '/duplicate'),
    DDropdownItem(label: 'Delete', href: '/delete'),
  ],
)

With Icons

Edit Copy Share
dart
1
2
3
4
5
6
7
8
9
10
11
DDropdown(
  trigger: DButton(
    label: 'Actions',
    trailingIcon: DIcon(name: DIconNames.chevronDown),
  ),
  items: [
    DDropdownItem(label: 'Edit', icon: 'edit', href: '/edit'),
    DDropdownItem(label: 'Copy', icon: 'copy', href: '/copy'),
    DDropdownItem(label: 'Share', icon: 'share', href: '/share'),
  ],
)

With Dividers

View Edit
Delete
dart
1
2
3
4
5
6
7
8
9
DDropdown(
  trigger: DButton(label: 'Menu'),
  items: [
    DDropdownItem(label: 'View', href: '/view'),
    DDropdownItem(label: 'Edit', href: '/edit'),
    DDropdownItem.divider(),  // Divider
    DDropdownItem(label: 'Delete', icon: 'trash', href: '/delete'),
  ],
)

Disabled Items

Edit
Archive
Delete
dart
1
2
3
4
5
6
7
8
DDropdown(
  trigger: DButton(label: 'Actions'),
  items: [
    DDropdownItem(label: 'Edit', href: '/edit'),
    DDropdownItem(label: 'Archive', disabled: true),  // Cannot be clicked
    DDropdownItem(label: 'Delete', href: '/delete'),
  ],
)

Icon Button Trigger

Edit Delete
dart
1
2
3
4
5
6
7
8
9
10
11
DDropdown(
  trigger: DButton(
    leadingIcon: DIcon(name: 'more-vertical'),
    variant: DButtonVariant.ghost,
    square: true,
  ),
  items: [
    DDropdownItem(label: 'Edit', icon: 'edit', href: '/edit'),
    DDropdownItem(label: 'Delete', icon: 'trash', href: '/delete'),
  ],
)

User Menu Example

John Doe
Profile Settings Billing
Sign out
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
DDropdown(
  trigger: div(classes: 'flex items-center gap-2 cursor-pointer', [
    DAvatar(src: '/user.jpg', size: DAvatarSize.sm),
    span([Component.text('John Doe')]),
    DIcon(name: 'chevron-down', size: DIconSize.sm),
  ]),
  items: [
    DDropdownItem(label: 'Profile', icon: 'user', href: '/profile'),
    DDropdownItem(label: 'Settings', icon: 'settings', href: '/settings'),
    DDropdownItem(label: 'Billing', icon: 'credit-card', href: '/billing'),
    DDropdownItem.divider(),
    DDropdownItem(label: 'Sign out', icon: 'log-out', href: '/logout'),
  ],
)