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 and the menu items color can be set via local CSS variables. Or use global CSS variables for consistent application UI color.

IMPORTANT

The color property has been marked as deprecated since v2.2.0.

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.

CSS Variables

As CSS technology evolves, Vue MDBootstrap introduces local CSS variables on .dropdown-menu and global CSS variables for better customization.

Added in v2.2.0

Local CSS

.md-popover {
  .dropdown-menu {
    --md-dropdown-bg: var(--md-listview-bg, inherit);
    --md-dropdown-border-color: var(--border-translucent);
    --md-dropdown-border-width: 0;
    --md-dropdown-padding-x: 0;
    --md-dropdown-padding-y: 0;
    --md-dropdown-header-color: var(--md-subheader-color);
    --md-dropdown-header-padding-x: #{vars.$padding-md};
    --md-dropdown-header-padding-y: #{vars.$padding-sm};
    --md-dropdown-item-padding-x: var(--md-tile-padding-x, #{vars.$padding-md});
    --md-dropdown-item-padding-y: var(--md-tile-padding-y, #{vars.$padding-xs});
    --md-dropdown-link-color: var(--navigation-item-foreground);
    --md-dropdown-link-active-bg: var(--navigation-item-active-background);
    --md-dropdown-link-active-color: var(--navigation-item-active-foreground);
    --md-dropdown-link-hover-bg: var(--navigation-item-hover-background);
    --md-dropdown-link-hover-color: var(--navigation-item-hover-foreground);
  }
}

Global CSS

:root {
  --border-translucent: oklch(0.88 0.001 17.18 / 0.75);
  --navigation-item-foreground: var(--foreground);
  --navigation-item-active-background: #{vars.$default-active-bgcolor};
  --navigation-item-active-foreground: #{helper.to-oklch(color.change(color.scale(vars.$default-active-bgcolor, $lightness: -10%), $alpha: 1))};
  --navigation-item-hover-background: #{vars.$default-hover-bgcolor};
  --navigation-item-hover-foreground: var(--foreground);
}

API Reference

Property	Type	Default	Description
color deprecated	String		The dropdown menu background color. Updated in v2.2.0 Use unified global CSS variable instead.
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	The component's 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.