Vue Dropdowns - free examples & tutorial (original) (raw)

Toggle contextual overlays for displaying lists of links and more with the MDB dropdown plugin.

Note: Read the API tab to find all available options and advanced customization

Basic examples

Wrap the MDBDropdownToggle (your button or link) and theMDBDropdownMenu within MDBDropdown element. Bind anytruthy or falsy ref value to MDBDropdownMenu and toggle dropdown with a MDBDropdownToggle component. MDBDropdownMenu use semantic <ul> elements where appropriate, but custom markup is supported.

Regular button

MDBDropdownToggle is a regularbutton with primary color by default.

Link button

Add 'a' value to MDBDropdownToggle's tag property to make it an<a> element, or add any other HTML tag name to make it element of your choice.

Colors

You can do this with any button variant:

Split button

Similarly, create split button dropdowns by placing regularMDBBtn component and additional MDBDropdownToggle withsplit property for proper spacing around the dropdown caret.

We use this extra class to reduce the horizontalpadding on either side of the caret by 25% and remove themargin-left that’s added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.

Sizing

MDBDropdownToggle work with all button sizes, including default and split dropdown buttons.

Directions

Dropup

Trigger dropdown menus above elements by addingdropup property to the MDBDropdown component.

Dropright

Trigger dropdown menus at the right of the elements by adding.dropend to the parent element.

Dropleft

Trigger dropdown menus at the left of the elements by addingdropstart property to the MDBDropdown component.

Dividers

Separate groups of related menu items with adivider property.

Text

Place any freeform text within a dropdown menu with text and usespacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.

Forms

Put a form within a dropdown menu, or make it into a dropdown menu, and usemargin or padding utilities to give it the negative space you require.

Remove animation

To remove the fade animation on click, add:animation="false" attribute to the MDBDRopdownToggle.

To change the offset of the dropdown menu addoffset="skiddingValue, distanceValue" property. To change the location of the dropdown menu add target property with value of selector to expected reference for dropdown.

Dark variant

Add dark property onto an existing MDBDropdownMenu to match a dark navbar.