# 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

# Props

Prop name Description Type Values Default
disabled Dropdown disabled boolean -
inline Dropdown content (items) are shown inline, trigger is removed boolean -
scrollable Dropdown content will be scrollable boolean -
maxHeight Max height of dropdown content string|number - Config -> 'dropdown.maxHeight': 200
position Optional, position of the dropdown relative to the trigger string top-right, top-left, bottom-left
mobileModal Dropdown content (items) are shown into a modal on mobile boolean - Config -> 'dropdown.mobileModal': true
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
animation Custom animation (transition name) string - Config -> 'dropdown.animation': 'fade'
multiple Allows multiple selections boolean -
trapFocus Trap focus inside the dropdown. boolean - Config -> 'dropdown.trapFocus': true
closeOnClick Close dropdown when content is clicked boolean - true
canClose Can close dropdown by pressing escape or by clicking outside array|boolean escape, outside true
expanded Dropdown will be expanded (full-width) boolean -
triggers Dropdown will be triggered by any events array click, hover, contextmenu, focus ['click']
appendToBody Append dropdown content to body boolean -
appendToBodyCopyParent boolean -
rootClass string -
triggerClass string -
backgroundClass string -
menuClass string -
disabledClass string -
activeClass string -
hoverableClass string -
inlineClass string -
mobileClass string -
expandedClass string -

# Events

Event name Type Description
active-change undefined
change undefined

# Slots

Name Description Bindings
trigger [
{
"name": "active"
}
]
default

# DropdownItem

# Props

Prop name Description Type Values Default
value The value that will be returned on events and v-model string|number|boolean|object|array - null
disabled Item is disabled boolean -
custom Item is not a clickable item boolean -
tabindex number|string - 0
ariaRole string - ''
itemClass string -
itemActiveClass string -
itemDisabledClass string -

# Events

Event name Type 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-background-active $dropdown-item-background-active $primary
--oruga-dropdown-item-color-active $dropdown-item-color-active $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-breakpoint $dropdown-mobile-breakpoint 1024px
--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