# Dropdown
Dropdowns are very versatile, can used as a quick menu or even like a select for discoverable content
# Examples
# Base
# Multiple
# Scrollable
# Class props
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 | |
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: { |
appendToBody | Append dropdown content to body | 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: { |
menuTag | Dropdown menu tag name | string | - | From config dropdown: { |
mobileBreakpoint | Mobile breakpoint as max-width value | string | - | |
mobileModal | Dropdown content (items) are shown into a modal on mobile | boolean | - | From config dropdown: { |
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: { |
triggerTabindex | Set the tabindex attribute on the dropdown trigger div (-1 to prevent selection via tab key) | number | - | 0 |
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: { |
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 |
← Datetimepicker Field →