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
## 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 name | Description | Type | Values | Default |
---|---|---|---|---|
active | The active state of the dropdown, use v-model:active to make it two-way binding | boolean | - | false |
animation | Custom animation (transition name) | string | - | From config: dropdown: { |
ariaRole | Role 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: { |
checkScroll | Makes the component check if menu reached scroll start or end and emit scroll events. | boolean | - | From config: dropdown: { |
closeable | Dropdown close options (pressing escape, clicking the content or outside) | boolean | string[] | true , false , escape , outside , content | From config: dropdown: { |
delay | Dropdown delay before it appears (number in ms) | number | - | |
desktopModal | Dropdown content (items) are shown into a modal on desktop | boolean | - | From config: dropdown: { |
disabled | Dropdown is disabled | boolean | - | false |
expanded | Dropdown will be expanded (full-width) | boolean | - | false |
inline | Dropdown content (items) are shown inline, trigger is removed | boolean | - | false |
label | Trigger label, unnecessary when trgger slot is used | string | - | |
maxHeight | Max height of dropdown content | number | string | - | From config: dropdown: { |
menuId | HTML element Id of the dropdown menu element | string | - | |
menuTabindex | Tabindex of the dropdown menu element | number | - | |
menuTag | Dropdown menu tag name | DynamicComponent | - | From config: dropdown: { |
mobileBreakpoint | Mobile breakpoint as max-width value | string | - | From config: dropdown: { |
mobileModal | Dropdown content (items) are shown into a modal on mobile | boolean | - | From config: dropdown: { |
v-model | The selected option value | unknown | - | |
multiple | Allows multiple selections - converts the modelValue into an array | boolean | - |
|
options | Dropdown options, unnecessary when default slot is used | OptionsPropWithGroups<unknown> | - | |
override | Override existing theme classes completely | boolean | - | |
position | Position 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: { |
scrollable | Dropdown content will be scrollable | boolean | - | false |
tabindex | Set the tabindex attribute on the dropdown trigger div (-1 to prevent selection via tab key) | number | - | 0 |
teleport | Append 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: { |
trapFocus | Trap focus inside the dropdown. | boolean | - | From config: dropdown: { |
triggerTag | Dropdown trigger tag name | DynamicComponent | - | From config: dropdown: { |
triggers | Dropdown will be triggered by any events | ("click" | "contextmenu" | "focus" | "hover")[] | click , hover , contextmenu , focus | From config: dropdown: { |
Events
Event name | Properties | Description |
---|---|---|
update:model-value | value T | T[] - updated modelValue prop | modelValue prop two-way binding |
update:active | value boolean - updated active prop | active prop two-way binding |
change | value T | T[] - selected value | on change event - fired after update:modelValue |
close | method string - close method | on close event |
scroll-start | the list inside the dropdown reached the start | |
scroll-end | the list inside the dropdown reached it's end |
Slots
Name | Description | Bindings |
---|---|---|
trigger | Override the trigger element, default is label prop | active boolean - dropdown active statetoggle () => void - toggle dropdown active state |
default | Place dropdown items here | active boolean - dropdown active statetoggle () => void - toggle dropdown active state |
## DropdownItem component
html
<o-dropdown-item></o-dropdown-item>
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
ariaRole | Role 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. | string | listitem , menuitem , button | From config: dropdown: { |
clickable | Item is clickable and emit an event | boolean | - | true |
disabled | Item is disabled | boolean | - | false |
label | Item label, unnecessary when default slot is used | string | - | |
override | Override existing theme classes completely | boolean | - | |
tabindex | Set the tabindex attribute on the dropdown item div (-1 to prevent selection via tab key) | number | string | - | 0 |
tag | Dropdown item tag name | DynamicComponent | - | From config: dropdown: { |
value | Item value (it will be used as v-model of wrapper component) - default is an uuid | string|number|object | - |
Events
Event name | Properties | Description |
---|---|---|
click | value string | number | object - value prop dataevent event - Native Event | onclick event |
Slots
Name | Description | Bindings |
---|---|---|
default | Override the label, default is label prop |
## Sass variables
Current theme ➜ Oruga
SASS Variable | Default |
---|---|
$dropdown-disabled-opacity | var(--#{$prefix}base-disabled-opacity) |
$dropdown-item-active-background-color | var(--#{$prefix}primary) |
$dropdown-item-active-color | var(--#{$prefix}primary-invert) |
$dropdown-item-color | #000000 |
$dropdown-item-disabled-opacity | var( --#{$prefix}base-disabled-opacity) |
$dropdown-item-font-size | var(--#{$prefix}base-font-size) |
$dropdown-item-hover-background-color | #f5f5f5 |
$dropdown-item-hover-color | #000000 |
$dropdown-item-line-height | var(--#{$prefix}base-line-height) |
$dropdown-item-padding | 0.375rem 1rem |
$dropdown-item-font-weight | 400 |
$dropdown-menu-background | #ffffff |
$dropdown-menu-border-radius | var(--#{$prefix}base-border-radius) |
$dropdown-menu-box-shadow | 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02) |
$dropdown-menu-spacer | 0px |
$dropdown-menu-margin | 0 |
$dropdown-menu-padding | 0.5rem 0 0.5rem 0 |
$dropdown-menu-width | 12rem |
$dropdown-menu-zindex | 50 |
$dropdown-mobile-max-height | calc(100vh - 120px) |
$dropdown-mobile-max-width | 460px |
$dropdown-mobile-overlay-color | rgba(#000000, 0.86) |
$dropdown-mobile-overlay-zindex | 55 |
$dropdown-mobile-width | calc(100vw - 40px) |
$dropdown-mobile-zindex | 60 |
See ➜ 📄 Full scss file
Current theme ➜ Bulma
SASS Variable | Default |
---|---|
$dropdown-mobile-breakpoint | vars.$desktop |
$dropdown-background-background-color | hsla( #{css.getVar("scheme-h")}, #{css.getVar("scheme-s")}, #{css.getVar("scheme-invert-l")}, 0.86) |
$dropdown-disabled-opacity | 0.5 |
$dropdown-gap | 0px |
$dropdown-z | 40 |
See ➜ 📄 Full scss file
Current theme ➜ Bootstrap
SASS Variable | Default |
---|---|
$dropdown-modal-menu-zindex | $zindex-modal |
$dropdown-modal-backdrop-zindex | $zindex-modal-backdrop |
See ➜ 📄 Full scss file