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" | "menu" | "list" | "listbox" | 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 | string | number | - | 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 | string | number | object | (string | number | object)[] | - | |
multiple | Allows multiple selections - converts the modelValue into an array | boolean | - |
|
options | Dropdown options, unnecessary when default slot is used | OptionsPropWithGroups<string | number | object> | - | |
override | Override existing theme classes completely | boolean | - | |
position | Position of the dropdown relative to the trigger | "auto" | "top" | "bottom" | "left" | "right" | "top-right" | "top-left" | "bottom-left" | "bottom-right" | 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. | string | boolean | object | - | 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:modelValue | value string | number | object | array - updated modelValue prop | modelValue prop two-way binding |
update:active | value boolean - updated active prop | active prop two-way binding |
change | value string | number | object | array - 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 state |
default | Place dropdown items here | active boolean - dropdown active statetoggle boolean - toggle active state function |
DropdownItem component
html
<o-dropdown-item></o-dropdown-item>
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
ariaRole | - | From config: dropdown: { | ||
clickable | - | true | ||
disabled | - | false | ||
label | - | |||
override | - | |||
tabindex | - | 0 | ||
tag | - | From config: dropdown: { | ||
value | - |
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