UI components for Vue.js and CSS framework agnostic

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

Examples

Base

Custom

Show code

HTML

html

<section class="odocs-spaced">
    <o-dropdown aria-role="list">
        <template #trigger="{ active }">
            <o-button
                variant="primary"
                label="Click me!"
                :icon-right="active ? 'caret-up' : 'caret-down'" />
        </template>

        <o-dropdown-item aria-role="listitem" label="Action" />
        <o-dropdown-item aria-role="listitem" label="Another action" />
        <o-dropdown-item aria-role="listitem" label="Something else" />
    </o-dropdown>

    <o-dropdown :triggers="['hover']" aria-role="list">
        <template #trigger="{ active }">
            <o-button
                variant="info"
                label="Hover me!"
                :icon-right="active ? 'caret-up' : 'caret-down'" />
        </template>

        <o-dropdown-item aria-role="listitem" label="Action" />
        <o-dropdown-item aria-role="listitem" label="Another action" />
        <o-dropdown-item aria-role="listitem" label="Something else" />
    </o-dropdown>

    <o-dropdown disabled aria-role="list">
        <template #trigger="{ active }">
            <o-button
                label="Disabled"
                :icon-right="active ? 'caret-up' : 'caret-down'" />
        </template>

        <o-dropdown-item aria-role="listitem" label="Action" />
        <o-dropdown-item aria-role="listitem" label="Another action" />
        <o-dropdown-item aria-role="listitem" label="Something else" />
    </o-dropdown>

    <o-dropdown aria-role="list">
        <template #trigger>
            <div>
                Custom
                <o-icon variant="success" icon="caret-down" role="button" />
            </div>
        </template>

        <o-dropdown-item aria-role="listitem" label="Action" />
        <o-dropdown-item aria-role="listitem" label="Another action" />
        <o-dropdown-item aria-role="listitem" label="Something else" />
    </o-dropdown>

    <o-dropdown :triggers="['contextmenu']" aria-role="list">
        <template #trigger>
            <o-button label="Right click" role="button" />
        </template>

        <o-dropdown-item aria-role="listitem" label="Action" />
        <o-dropdown-item aria-role="listitem" label="Another action" />
        <o-dropdown-item aria-role="listitem" label="Something else" />
    </o-dropdown>
</section>

html

js

scss

css

Multiple

selected: []

Show code

Scrollable

Show code

Position

Show code

Class props

How does the 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.

html

<o-dropdown></o-dropdown>

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	-
label	Trigger label, unnecessary when trgger slot is used	string	-	undefined
maxHeight	Max height of dropdown content	string\|number	-	From config: `dropdown: { maxHeight: 200 }`
menuTag	Dropdown menu tag name	string \| Component	-	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		boolean	-
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 }`
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
update:modelValue
active-change
change

Slots

Name	Description	Bindings
trigger
default

DropdownItem component

html

<o-dropdown-item></o-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	-
label	Item label, unnecessary when default slot is used	string	-	undefined
override		boolean	-
tabindex		number\|string	-	0
tag	Dropdown item tag name	string \| Component	-	From config: `dropdown: { itemTag: 'div' }`
value	The value that will be returned on events and v-model	string\|number\|boolean\|object\|array	-

Events

Event name	Properties	Description
click

Slots

Name	Description	Bindings
default

Sass variables

Current theme ➜ Oruga Base

SASS Variable	Default
$dropdown-disabled-opacity	$base-disabled-opacity
$dropdown-item-active-background-color	$primary
$dropdown-item-active-color	$primary-invert
$dropdown-item-color	#000000
$dropdown-item-disabled-opacity	$base-disabled-opacity
$dropdown-item-font-size	$base-font-size
$dropdown-item-hover-background-color	#f5f5f5
$dropdown-item-hover-color	#000000
$dropdown-item-line-height	$base-line-height
$dropdown-item-padding	0.375rem 1rem
$dropdown-item-font-weight	400
$dropdown-menu-background	#ffffff
$dropdown-menu-border-radius	$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-margin	0
$dropdown-menu-padding	0.5rem 0 0.5rem 0
$dropdown-menu-width	12rem
$dropdown-menu-zindex	20
$dropdown-mobile-max-height	calc(100vh - 120px)
$dropdown-mobile-max-width	460px
$dropdown-mobile-overlay-color	rgba(#000000, 0.86)
$dropdown-mobile-overlay-zindex	40
$dropdown-mobile-width	calc(100vw - 40px)
$dropdown-mobile-zindex	50

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS Variable	Default
$dropdown-disabled-opacity	$base-disabled-opacity
$dropdown-item-active-background-color	$primary
$dropdown-item-active-color	$primary-invert
$dropdown-item-color	#000000
$dropdown-item-disabled-opacity	$base-disabled-opacity
$dropdown-item-font-size	$base-font-size
$dropdown-item-hover-background-color	#f5f5f5
$dropdown-item-hover-color	#000000
$dropdown-item-line-height	$base-line-height
$dropdown-item-padding	0.375rem 1rem
$dropdown-item-font-weight	400
$dropdown-menu-background	#ffffff
$dropdown-menu-border-radius	$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-margin	0
$dropdown-menu-padding	0.5rem 0 0.5rem 0
$dropdown-menu-width	12rem
$dropdown-menu-zindex	20
$dropdown-mobile-max-height	calc(100vh - 120px)
$dropdown-mobile-max-width	460px
$dropdown-mobile-overlay-color	rgba(#000000, 0.86)
$dropdown-mobile-overlay-zindex	40
$dropdown-mobile-width	calc(100vw - 40px)
$dropdown-mobile-zindex	50

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS Variable	Default
$dropdown-menu-zindex	$zindex-modal

See ➜ 📄 Full scss file

Dropdown ​

Examples ​

Base

Multiple

Scrollable

Position

Class props ​

Class prop

Description

Props

Suffixes

Dropdown component ​

Props ​

Events ​

Slots ​

DropdownItem component ​

Props ​

Events ​

Slots ​

Sass variables ​

Dropdown

Examples

Class props

Dropdown component

Props

Events

Slots

DropdownItem component

Props

Events

Slots

Sass variables