Dropdown Menu

Displays a menu to the user—such as a set of actions or functions—triggered by a button.

BrDropdown is based on BrConfigProvider for global theme configuration (colors, radius, shadows, z-index tokens), supporting multiple trigger methods and position adaptation.

Basic Usage

Click the trigger to show the dropdown menu.

Example

Triggers

Supports custom trigger elements and Hover trigger (controlled via v-model:open).

Example

Positioning

Supports align and side props to control the popup position (12 directions).

Example

Groups & Separators

Use BrDropdownGroup and BrDropdownSeparator to group menu items. Supports disabled prop to disable menu items.

Example

Theming

Global configuration of Dropdown radius, background color, shadow, etc. via BrConfigProvider.

Example

API

BrDropdown

Prop	Type	Default	Description
defaultOpen	boolean	false	The open state of the dropdown menu when it is initially rendered.
open	boolean	undefined	The controlled open state of the dropdown menu.
dir	'ltr' | 'rtl'	undefined	The reading direction of the dropdown menu.
modal	boolean	true	The modality of the dropdown menu.

BrDropdownTrigger

Prop	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.
disabled	boolean	false	When true, prevents the user from interacting with the item.

BrDropdownContent

Prop	Type	Default	Description
align	'start' | 'center' | 'end'	'center'	The preferred alignment against the anchor.
side	'top' | 'right' | 'bottom' | 'left'	'bottom'	The preferred side of the anchor to render against.
sideOffset	number	4	The distance in pixels from the anchor.
alignOffset	number	0	An offset in pixels from the "start" or "end" alignment options.
avoidCollisions	boolean	true	When true, overrides the side and align preferences to prevent collisions with boundary edges.
loop	boolean	false	When true, allows cycling through the items with the keyboard.
class	string	''	Custom class name.

BrDropdownItem

Prop	Type	Default	Description
disabled	boolean	false	When true, prevents the user from interacting with the item.
textValue	string	undefined	Optional text used for typeahead purposes.
inset	boolean	false	Whether to add padding for items without icons to align with items with icons.
class	string	''	Custom class name.

BrDropdownLabel

Prop	Type	Default	Description
inset	boolean	false	Whether to add padding for labels to align with items.