Skip to content

Dropdown

Dropdowns are very versatile, can used as a quick menu or even like a select for discoverable content

Examples

Base

Show code

Inline

Show code

Multiple

Show code

Scrollable

Show code

Position

Show code

Programmatically

Show code

Class props

'Classes applied to the element'

Dropdowns are very versatile, can used as a quick menu or even like a select for discoverable content

html
<o-dropdown></o-dropdown>

Props

Prop nameDescriptionTypeValuesDefault
activeThe active state of the dropdown, use v-model:active to make it two-way binding.boolean-false
animationCustom animation (transition name)string-
From config:
dropdown: {
  animation: "fade"
}
ariaRoleRole attribute to be passed to the list container for better accessibility.
Use menu only in situations where your dropdown is related to a navigation menu.
stringlist, listbox, menu, dialog
From config:
dropdown: {
  ariaRole: "list"
}
checkScrollMakes the component check if menu reached scroll start or end and emit scroll events.boolean-
From config:
dropdown: {
  checkScroll: false
}
closeableDropdown close options (pressing escape, clicking the content or outside)string[] | booleantrue, false, escape, outside, content
From config:
dropdown: {
  closeable: ["escape","outside","content"]
}
delayDropdown delay before it appears (number in ms)number-
disabledDropdown is disabledboolean-false
expandedDropdown will be expanded (full-width)boolean-false
inlineDropdown content (items) are shown inline, trigger is removedboolean-false
labelTrigger label, unnecessary when trgger slot is usedstring-
maxHeightMax height of dropdown contentstring|number-
From config:
dropdown: {
  maxHeight: 200
}
menuIdHTML element ID of the dropdown menu elementstring-null
menuTabindexTabindex of the dropdown menu elementnumber-null
menuTagDropdown menu tag nameDynamicComponent-
From config:
dropdown: {
  menuTag: "div"
}
mobileBreakpointMobile breakpoint as max-width valuestring-
From config:
dropdown: {
  mobileBreakpoint: undefined
}
mobileModalDropdown content (items) are shown into a modal on mobileboolean-
From config:
dropdown: {
  mobileModal: true
}
multipleAllows multiple selectionsboolean-false
overrideOverride existing theme classes completelyboolean-
positionPosition of the dropdown relative to the triggerstringauto, top, bottom, left, right, top-right, top-left, bottom-left, bottom-right
From config:
dropdown: {
  position: "bottom-left"
}
scrollableDropdown content will be scrollableboolean-false
tabindexSet the tabindex attribute on the dropdown trigger div (-1 to prevent selection via tab key)number-0
teleportAppend the component to another part of the DOM.
Set true to append the component to the body.
In addition, any CSS selector string or an actual DOM node can be used.
boolean|string|object-
From config:
dropdown: {
  teleport: false
}
trapFocusTrap focus inside the dropdown.boolean-
From config:
dropdown: {
  trapFocus: true
}
triggerTagDropdown trigger tag nameDynamicComponent-
From config:
dropdown: {
  triggerTag: "div"
}
triggersDropdown will be triggered by any eventsstring[]click, hover, contextmenu, focus
From config:
dropdown: {
  triggers: ["click"]
}
v-modelstring|number|boolean|object|array-

Events

Event namePropertiesDescription
update:modelValuevalue [String, Number, Boolean, Object, Array] - updated modelValue propmodelValue prop two-way binding
update:activevalue boolean - updated active propactive prop two-way binding
changevalue any - selected valueon change event - fired after modelValue:update
closemethod string - close methodon close event
scroll-startthe list inside the dropdown reached the start
scroll-endthe list inside the dropdown reached it's end

Slots

NameDescriptionBindings
triggerOverride the trigger element, default is label propactive boolean - dropdown active state
defaultPlace dropdown items hereactive boolean - dropdown active state
toggle boolean - toggle active state function
html
<o-dropdown-item></o-dropdown-item>

Props

Prop nameDescriptionTypeValuesDefault
ariaRoleRole attribute to be passed to the list item for better accessibility.
Use menuitem only in situations where your dropdown is related to a navigation menu.
stringlistitem, menuitem, button
From config:
dropdown: {
  itemAriaRole: "listitem"
}
clickableItem is clickable and emit an eventboolean-true
disabledItem is disabledboolean-false
labelItem label, unnecessary when default slot is usedstring-
tabindexSet the tabindex attribute on the dropdown item div (-1 to prevent selection via tab key)number|string-0
tagDropdown item tag nameDynamicComponent-
From config:
dropdown: {
  itemTag: "div"
}
valueThe value that will be returned on events and v-modelT-Default function (see source code)

Events

Event namePropertiesDescription
clickvalue [String, Number, Boolean, Object, Array] - value prop data
event event - Native Event
onclick event

Slots

NameDescriptionBindings
defaultOverride the label, default is label prop

Sass variables

Current theme ➜ Oruga Base

SASS VariableDefault
$dropdown-disabled-opacity$base-disabled-opacity
$dropdown-item-active-background-color$primary
$dropdown-item-active-color$primary-invert
$dropdown-item-color#000000
$dropdown-item-disabled-opacity$base-disabled-opacity
$dropdown-item-font-size$base-font-size
$dropdown-item-hover-background-color#f5f5f5
$dropdown-item-hover-color#000000
$dropdown-item-line-height$base-line-height
$dropdown-item-padding0.375rem 1rem
$dropdown-item-font-weight400
$dropdown-menu-background#ffffff
$dropdown-menu-border-radius$base-border-radius
$dropdown-menu-box-shadow0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02)
$dropdown-menu-spacer0px
$dropdown-menu-margin0
$dropdown-menu-padding0.5rem 0 0.5rem 0
$dropdown-menu-width12rem
$dropdown-menu-zindex20
$dropdown-mobile-max-heightcalc(100vh - 120px)
$dropdown-mobile-max-width460px
$dropdown-mobile-overlay-colorrgba(#000000, 0.86)
$dropdown-mobile-overlay-zindex40
$dropdown-mobile-widthcalc(100vw - 40px)
$dropdown-mobile-zindex50

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS VariableDefault
$dropdown-disabled-opacity$base-disabled-opacity
$dropdown-item-active-background-color$primary
$dropdown-item-active-color$primary-invert
$dropdown-item-color#000000
$dropdown-item-disabled-opacity$base-disabled-opacity
$dropdown-item-font-size$base-font-size
$dropdown-item-hover-background-color#f5f5f5
$dropdown-item-hover-color#000000
$dropdown-item-line-height$base-line-height
$dropdown-item-padding0.375rem 1rem
$dropdown-item-font-weight400
$dropdown-menu-background#ffffff
$dropdown-menu-border-radius$base-border-radius
$dropdown-menu-box-shadow0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02)
$dropdown-menu-spacer0px
$dropdown-menu-margin0
$dropdown-menu-padding0.5rem 0 0.5rem 0
$dropdown-menu-width12rem
$dropdown-menu-zindex20
$dropdown-mobile-max-heightcalc(100vh - 120px)
$dropdown-mobile-max-width460px
$dropdown-mobile-overlay-colorrgba(#000000, 0.86)
$dropdown-mobile-overlay-zindex40
$dropdown-mobile-widthcalc(100vw - 40px)
$dropdown-mobile-zindex50

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS VariableDefault
$dropdown-modal-menu-zindex$zindex-modal
$dropdown-modal-backdrop-zindex$zindex-modal-backdrop

See ➜ 📄 Full scss file

Released under the MIT License.