# Dropdown

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


edit on github

# Examples

# Base

# Multiple

# Scrollable

# Class props

📄 Full scss file


How does Class props inspector work?
Class prop Description Props Suffixes
disabledClass Class of dropdown when disabled. disabled
expandedClass Class of dropdown when expanded. expanded
inlineClass Class of dropdown menu when inline. inline
itemActiveClass Class of the dropdown item when active.
itemClass Class of the dropdown item.
itemDisabledClass Class of the dropdown item when disabled. disabled
menuActiveClass Class of dropdown menu when active. inline
menuClass Class of the dropdown menu.
🔍 Classes applied have a higher specificity than expected when inlineClass or mobileClass or expandedClass is applied
menuMobileOverlayClass Class of the overlay when on mobile.
👉 Switch to mobile view to see it in action!

🔍 Classes applied have a higher specificity than expected when mobileClass is applied
menuPositionClass Class of dropdown menu position. position top-right
top-left
bottom-left
mobileClass Class of dropdown when on mobile.
👉 Switch to mobile view to see it in action!
rootClass Class of the root element.
triggerClass Class of the trigger element.


# Props

Prop name Description Type Values Default
animation Custom animation (transition name) string -
From config

dropdown: {
  animation: 'fade'
}
appendToBody Append dropdown content to body boolean -
appendToBodyCopyParent boolean -
ariaRole Role attribute to be passed to list container for better accessibility. Use menu only in situations where your dropdown is related to navigation menus string list, menu, dialog null
canClose Can close dropdown by pressing escape or by clicking outside array|boolean escape, outside true
closeOnClick Close dropdown when content is clicked boolean - true
disabled Dropdown disabled boolean -
expanded Dropdown will be expanded (full-width) boolean -
inline Dropdown content (items) are shown inline, trigger is removed boolean -
maxHeight Max height of dropdown content string|number -
From config

dropdown: {
  maxHeight: 200
}
menuTag Dropdown menu tag name string -
From config

dropdown: {
  menuTag: 'div'
}
mobileBreakpoint Mobile breakpoint as max-width value string -
mobileModal Dropdown content (items) are shown into a modal on mobile boolean -
From config

dropdown: {
  mobileModal: true
}
multiple Allows multiple selections boolean -
override Override classes boolean - false
position Optional, position of the dropdown relative to the trigger string top-right, top-left, bottom-left
scrollable Dropdown content will be scrollable boolean -
trapFocus Trap focus inside the dropdown. boolean -
From config

dropdown: {
  trapFocus: true
}
triggers Dropdown will be triggered by any events array click, hover, contextmenu, focus ['click']
v-model string|number|boolean|object|array - null

# Events

Event name Properties Description
active-change
change
input

# Slots

Name Description Bindings
trigger
default

# Dropdown Item

# Props

Prop name Description Type Values Default
ariaRole string - ''
clickable Item is clickable and emit an event boolean - true
disabled Item is disabled boolean -
override Override classes boolean - false
tabindex number|string - 0
tag Dropdown item tag name string -
From config

dropdown: {
  itemTag: 'div'
}
value The value that will be returned on events and v-model string|number|boolean|object|array - null

# Events

Event name Properties Description
click

# Slots

Name Description Bindings
default

# Style

CSS Variable SASS Variable Default
--oruga-dropdown-disabled-opacity $dropdown-disabled-opacity $base-disabled-opacity
--oruga-dropdown-item-active-background-color $dropdown-item-active-background-color $primary
--oruga-dropdown-item-active-color $dropdown-item-active-color $primary-invert
--oruga-dropdown-item-color $dropdown-item-color #000000
--oruga-dropdown-item-disabled-opacity $dropdown-item-disabled-opacity $base-disabled-opacity
--oruga-dropdown-item-font-size $dropdown-item-font-size $base-font-size
--oruga-dropdown-item-hover-background-color $dropdown-item-hover-background-color #f5f5f5
--oruga-dropdown-item-hover-color $dropdown-item-hover-color #000000
--oruga-dropdown-item-line-height $dropdown-item-line-height $base-line-height
--oruga-dropdown-item-padding $dropdown-item-padding .375rem 1rem
--oruga-dropdown-item-font-weight $dropdown-item-font-weight 400
--oruga-dropdown-menu-background $dropdown-menu-background #ffffff
--oruga-dropdown-menu-border-radius $dropdown-menu-border-radius $base-border-radius
--oruga-dropdown-menu-box-shadow $dropdown-menu-box-shadow 0 0.5em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02)
--oruga-dropdown-menu-margin $dropdown-menu-margin 0
--oruga-dropdown-menu-padding $dropdown-menu-padding .5rem 0 .5rem 0
--oruga-dropdown-menu-width $dropdown-menu-width 12rem
--oruga-dropdown-menu-zindex $dropdown-menu-zindex 20
--oruga-dropdown-mobile-max-height $dropdown-mobile-max-height calc(100vh - 120px)
--oruga-dropdown-mobile-max-width $dropdown-mobile-max-width 460px
--oruga-dropdown-mobile-overlay-color $dropdown-mobile-overlay-color rgba(#000000, 0.86)
--oruga-dropdown-mobile-overlay-zindex $dropdown-mobile-overlay-zindex 40
--oruga-dropdown-mobile-width $dropdown-mobile-width calc(100vw - 40px)
--oruga-dropdown-mobile-zindex $dropdown-mobile-zindex 50