Dropdown Menu

BsDropdownMenu is a popup container which are typically used for displaying lists of links and actions in a dropdown menu style.

Overview

<bs-dropdown-menu> uses BsPopover internally. Because its unique concept as popup container, <bs-dropdown-menu> can also be used to display other components.

IMPORTANT

• The contents for the <bs-dropdown-menu> needs to be placed inside the content slot.
• The <bs-menu> tag still works, but has been deprecated since v2.0.0.

TIP

<bs-list-nav-item> or <bs-list-tile> can also be used as the menu item, see Display Placement example.

Color

<bs-dropdown-menu> background color can be set using the color property.

TIP

Any MDBootstrap Color variants and Material Color variants can be applied to the color property.

Display on Hover

<bs-dropdown-menu> can be displayed on mouse hover event instead of clicking the activator element by defining the open-on-hover property explicitly.

Display Placement

<bs-dropdown-menu> supports various positioning such as top, top-left, top-right, bottom, bottom-left, bottom-right, left, left-top, left-bottom, right, right-top, right-bottom. It can be done by explicitly define the placement property.

Popup Container

You can configure <bs-dropdown-menu> to be static when opened, allowing it to function as a popup container. This can be useful when there are multiple interactive items within the <bs-dropdown-menu> contents.

API Reference

Property	Type	Default	Description
color	String	'white'	The dropdown menu background color. Any MDBootstrap Color or Material Color variants can be used.
content-click-close	Boolean	true	Close or hide dropdown menu when content clicked.
cover	Boolean	false	Display dropdown menu at a position that covers the activator.
disabled	Boolean	false	Completely disable the dropdown menu and prevents it from displaying.
open v-model	Boolean	false	BsDropdownMenu state: show or hide.
open-on-hover	Boolean	false	Triggers the dropdown menu to display when mouseenter and hide when mouseleave.
placement	String	'bottom-left'	The dropdown menu display placement. Valid values are: top, top-left, top-right, bottom, bottom-left, bottom-right, left, left-top, left-bottom, right, right-top, right-bottom.
space	Number		Number of pixel to shift the dropdown menu display position.
transition	String	'scale'	Transition animation when show the dropdown menu. This animation is effected by placement property.

Name	Arguments	Description
close		Fired when dropdown menu is closed.
update:open	( state:Boolean)	Used to update the open property. v2.0.0

Name	Description
default	The outlet slot used to place the main content.