Dropdown
A toggleable, auto-positioned overlay menu for actions and links. Compose it from
Dropdown, DropdownToggle, DropdownMenu,
DropdownItem, and DropdownDivider — positioning, outside-click
dismissal, and keyboard navigation are handled for you.
Import
import {
Dropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
DropdownDivider,
} from '@metatoy/bootstrap-styled';Basic
Dropdown owns the open state; DropdownToggle opens and closes it, and DropdownMenu
holds the DropdownItems. Items are real buttons — pass onClick, or disabled to
disable one. Use DropdownDivider to separate groups. Click the toggle below to open the
menu; clicking outside or pressing Escape dismisses it.
Toggle variants & default-open
DropdownToggle extends Button, so it takes the same variant (including the
outline-* styles). Pass defaultOpen on Dropdown to render the menu open from the
first paint.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children● | React.ReactNode | — | — |
| defaultOpen | boolean | — | Render the menu open from the first paint (harness/static use). |
The menu is assembled from subcomponents rather than a props API:
| Component | Role |
|---|---|
| Dropdown | Root. Owns open state. Props: children, defaultOpen?: boolean. |
| DropdownToggle | The trigger button. Extends Button — accepts variant and all button props. |
| DropdownMenu | The positioned menu container. Props: children. |
| DropdownItem | A menu action. Extends <button> — accepts onClick, disabled. |
| DropdownDivider | A styled <hr> separator between item groups. |
Theming
The toggle inherits the standard Bootstrap button tokens (--bs-btn-*) for its chosen
variant. The menu reads surface and border tokens — --bs-body-bg,
--bs-body-color, --bs-border-color-translucent, and --bs-border-radius — and the
menu offset uses --bs-dropdown-spacer. Items use the tertiary/secondary background
tokens for their hover and active states.
Accessibility
The toggle exposes aria-haspopup / aria-expanded; the menu is a role="menu" whose
items are role="menuitem". Focus moves into the menu on open and Up/Down arrow keys
move between items (roving tabindex). Escape and outside-clicks close the menu and return
focus to the toggle. Menus render in a portal scoped to the active color mode so overlays
inherit the right theme.
Explore in Ladle
Dropdown has no dedicated Ladle story; the link opens the component explorer index.