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

Options

Show code

Inline

Show code

Multiple

Show code

Scrollable

Show code

Position

Show code

Programmatically

Show code
## Class props
'Classes applied to the element'
## Dropdown component

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 bindingboolean-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.
"dialog" | "list" | "listbox" | "menu"list, 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)boolean | string[]true, false, escape, outside, content
From config:
dropdown: {
  closeable: ["escape","outside","content"]
}
delayDropdown delay before it appears (number in ms)number-
desktopModalDropdown content (items) are shown into a modal on desktopboolean-
From config:
dropdown: {
  desktopModal: false
}
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 contentnumber | string-
From config:
dropdown: {
  maxHeight: 200
}
menuIdHTML element Id of the dropdown menu elementstring-
menuTabindexTabindex of the dropdown menu elementnumber-
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
}
v-modelThe selected option valueunknown-
multipleAllows multiple selections - converts the modelValue into an arrayboolean-
optionsDropdown options, unnecessary when default slot is usedOptionsPropWithGroups<unknown>-
overrideOverride existing theme classes completelyboolean-
positionPosition of the dropdown relative to the trigger"auto" | "bottom-left" | "bottom-right" | "bottom" | "left" | "right" | "top-left" | "top-right" | "top"auto, 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 | object | string-
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 events("click" | "contextmenu" | "focus" | "hover")[]click, hover, contextmenu, focus
From config:
dropdown: {
  triggers: ["click"]
}

Events

Event namePropertiesDescription
update:model-valuevalue T | T[] - updated modelValue propmodelValue prop two-way binding
update:activevalue boolean - updated active propactive prop two-way binding
changevalue T | T[] - selected valueon change event - fired after update:modelValue
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
toggle () =&gt; void - toggle dropdown active state
defaultPlace dropdown items hereactive boolean - dropdown active state
toggle () =&gt; void - toggle dropdown active state
## DropdownItem component
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-
overrideOverride existing theme classes completelyboolean-
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"
}
valueItem value (it will be used as v-model of wrapper component) - default is an uuidstring|number|object-

Events

Event namePropertiesDescription
clickvalue string | number | object - value prop data
event event - Native Event
onclick event

Slots

NameDescriptionBindings
defaultOverride the label, default is label prop
## Sass variables

Current theme ➜ Oruga

SASS VariableDefault
$dropdown-disabled-opacityvar(--#{$prefix}base-disabled-opacity)
$dropdown-item-active-background-colorvar(--#{$prefix}primary)
$dropdown-item-active-colorvar(--#{$prefix}primary-invert)
$dropdown-item-color#000000
$dropdown-item-disabled-opacityvar( --#{$prefix}base-disabled-opacity)
$dropdown-item-font-sizevar(--#{$prefix}base-font-size)
$dropdown-item-hover-background-color#f5f5f5
$dropdown-item-hover-color#000000
$dropdown-item-line-heightvar(--#{$prefix}base-line-height)
$dropdown-item-padding0.375rem 1rem
$dropdown-item-font-weight400
$dropdown-menu-background#ffffff
$dropdown-menu-border-radiusvar(--#{$prefix}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-zindex50
$dropdown-mobile-max-heightcalc(100vh - 120px)
$dropdown-mobile-max-width460px
$dropdown-mobile-overlay-colorrgba(#000000, 0.86)
$dropdown-mobile-overlay-zindex55
$dropdown-mobile-widthcalc(100vw - 40px)
$dropdown-mobile-zindex60

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS VariableDefault
$dropdown-mobile-breakpointvars.$desktop
$dropdown-background-background-colorhsla( #{css.getVar("scheme-h")}, #{css.getVar("scheme-s")}, #{css.getVar("scheme-invert-l")}, 0.86)
$dropdown-disabled-opacity0.5
$dropdown-gap0px
$dropdown-z40

See ➜ 📄 Full scss file

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.