Dropdown Menu

An enterprise-level dropdown menu component based on BrConfigProvider for global theme configuration. It supports multiple directions, nested submenus, and custom trigger methods.

Component Features

• 🛠️ Multi-direction Popover: Supports popping out from top, bottom, left, and right directions, auto-adjusting to fit screen edges.
• 📋 Nested Submenus: Supports infinite levels of nested submenus, suitable for complex hierarchical structures.
• ⌨️ Shortcuts Support: Allows configuring shortcut keys for menu items to enhance keyboard operation experience.
• 🖱️ Multiple Triggers: Supports various trigger methods such as click, hover, and contextmenu.
• 🎨 Theme Customization: Supports global theme customization based on BrConfigProvider, and local style overrides via TailwindCSS.

Basic Usage

The most basic dropdown menu display.

Example

Position

Supports align and side properties to control the pop-up position, supporting 12 different directions.

Example

Complex Example

A complex application scenario combining icons, shortcuts, separators, nested submenus, disabled states, custom styles (like red highlight for destructive actions).

Example

Nested Submenus and Shortcuts

Supports multi-level nested submenus and configuring keyboard shortcuts via the shortcut prop.

Example

Custom Trigger Methods (Hover/ContextMenu)

Supports click, hover, and contextmenu trigger methods, which can be configured via the trigger prop.

Right-click in this area

Example

Form Integration

Typical application in form operations or table row actions.

Example

Theme Customization

Combined with BrConfigProvider, you can globally override the default styles of the component, such as modifying border radius, hover state colors, menu shadows, etc. At the same time, styles can be overridden locally via TailwindCSS.

Example

API Reference

BrDropdownMenu

Prop	Type	Default	Description
open (v-model)	boolean	-	Controls the open state of the menu
defaultOpen	boolean	false	Default open state
dir	'ltr' | 'rtl'	'ltr'	Text reading direction
trigger	'click' | 'hover' | 'contextmenu' | Array	'click'	Trigger method configuration
openDelay	number	200	Open delay in ms when hover triggered
closeDelay	number	300	Close delay in ms when hover triggered

BrDropdownMenuContent

Prop	Type	Default	Description
class	any	-	Custom class name
side	'top' | 'right' | 'bottom' | 'left'	'bottom'	The preferred side of the menu to render against
sideOffset	number	4	The distance in pixels from the trigger
align	'start' | 'center' | 'end'	'center'	The preferred alignment against the trigger
alignOffset	number	0	Alignment offset

BrDropdownMenuItem

Prop	Type	Default	Description
disabled	boolean	false	Whether the item is disabled
shortcut	string	-	Shortcut text (e.g. "⌘K")
inset	boolean	false	Whether to include left indentation (for icon alignment)

BrDropdownMenuSub

Root container for nested submenus, no additional props required.

BrDropdownMenuEmpty / BrDropdownMenuLoading

Used to display empty or loading states.

Prop	Type	Default	Description
text	string	'No data' / 'Loading...'	Prompt text