Overlays
Dropdown
Dropdown menu should be used when additional options are available to the user and there is a space constraint.
import { DropdownButton, DropdownMenu, Menu, MenuItem, MenuDivider, MenuGroup } from '@balance-web/dropdown';Loading demo…
This package has been deprecated. Use Dropdown v2 instead.
DropdownButton is also exported — a chevron-augmented ActionButton for
pairing with a manually-controlled menu instead of DropdownMenu's
all-in-one API. Like the rest of this package it's deprecated in favour of
Dropdown v2.
Usage
Basic
Loading demo…
Tones
Loading demo…
Icons
Loading demo…
Menu Alignment
Loading demo…
Groups and Dividers
Loading demo…
Disabled
Menu items can be disabled with a disabled prop.
Loading demo…
Item Overflow
When there are many items in a dropdown menu it will grow to a maximum height and the overflowing items will be scrollable.
Long labels will be truncated to avoid blowing out the menu width.
Loading demo…
Custom Trigger
The trigger prop also accepts a function to render a custom trigger element.
Loading demo…