Dropdown

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

Examples

Base

Show code

HTML

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

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

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

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

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

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

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

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

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

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

    <o-dropdown teleport>
        <template #trigger>
            <o-button label="Append to body" />
        </template>

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

Inline

Show code

HTML

<section class="odocs-spaced">
    <o-dropdown v-model="selectedOption" inline>
        <template #trigger>
            <o-button label="Inline" />
        </template>

        <o-dropdown-item :value="1" label="Action " />
        <o-dropdown-item :value="2" label="Another action " />
        <o-dropdown-item :value="3" label="Something else " />
    </o-dropdown>

    <p><b>selected</b>: {{ selectedOption }}</p>
</section>

JS

import { ref } from "vue";

const selectedOption = ref();

Multiple

Show code

HTML

<section>
    <p><b>selected</b>: {{ selectedOptions }}</p>

    <o-dropdown v-model:model-value="selectedOptions" multiple>
        <template #trigger>
            <o-button
                variant="primary"
                type="button"
                icon-right="caret-down">
                Selected ({{ selectedOptions.length }})
            </o-button>
        </template>

        <o-dropdown-item value="option1" label="Option 1" />
        <o-dropdown-item value="option2" label="Option 2" />
        <o-dropdown-item value="option3" label="Option 3" />
    </o-dropdown>
</section>

JS

import { ref } from "vue";

const selectedOptions = ref([]);

Scrollable

Show code

HTML

<section>
    <o-field>
        <o-switch v-model="isScrollable" label="Scrollable" />
    </o-field>

    <o-dropdown
        v-model="currentMenu"
        :scrollable="isScrollable"
        :max-height="maxHeight">
        <template #trigger>
            <o-button
                variant="primary"
                type="button"
                :label="currentMenu.text"
                :icon-left="currentMenu.icon"
                icon-right="caret-down" />
        </template>

        <o-dropdown-item
            v-for="(menu, index) in menus"
            :key="index"
            :value="menu">
            <div class="media">
                <o-icon class="media-left" :icon="menu.icon" />
                <div class="media-content">{{ menu.text }}</div>
            </div>
        </o-dropdown-item>
    </o-dropdown>
</section>

JS

import { ref } from "vue";

const maxHeight = 200;
const menus = [
    { icon: "users", text: "People" },
    { icon: "box", text: "Orders" },
    { icon: "credit-card", text: "Payments" },
    { icon: "dolly", text: "Logistics" },
    { icon: "business-time", text: "Jobs" },
    { icon: "shopping-cart", text: "Cart" },
    { icon: "cog", text: "Configuration" },
];

const isScrollable = ref(true);
const currentMenu = ref({ icon: "users", text: "People" });

SCSS

.media {
    align-items: flex-start;
    display: flex;
    text-align: left;
}
.media-content {
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;
    text-align: left;
    overflow-y: hidden;
    overflow-x: auto;
}
.media-left {
    margin-right: 1rem;
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
}

Position

Show code

HTML

<section class="odocs-spaced">
    <o-field>
        <o-switch v-model="teleport" label="teleport" />
    </o-field>

    <o-dropdown position="auto" expanded :teleport="teleport">
        <template #trigger>
            <o-button variant="primary" label="Position Auto" expanded />
        </template>

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

    <hr />

    <o-dropdown :teleport="teleport" position="right">
        <template #trigger>
            <o-button label="Append to right" />
        </template>

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

    <o-dropdown :teleport="teleport" position="left">
        <template #trigger>
            <o-button label="Append to left" />
        </template>

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

    <o-dropdown :teleport="teleport" position="top">
        <template #trigger>
            <o-button label="Append to top" />
        </template>

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

    <o-dropdown :teleport="teleport" position="bottom">
        <template #trigger>
            <o-button label="Append to bottom" />
        </template>

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

    <hr />

    <o-dropdown :teleport="teleport" position="top-right">
        <template #trigger>
            <o-button label="Append to top-right" />
        </template>

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

    <o-dropdown :teleport="teleport" position="top-left">
        <template #trigger>
            <o-button label="Append to top-left" />
        </template>

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

    <o-dropdown :teleport="teleport" position="bottom-right">
        <template #trigger>
            <o-button label="Append to bottom-right" />
        </template>

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

    <o-dropdown :teleport="teleport" position="bottom-left">
        <template #trigger>
            <o-button label="Append to bottom-left" />
        </template>

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

JS

import { ref } from "vue";

const teleport = ref(false);

Programmatically

Show code

HTML

<o-field grouped>
    <o-dropdown v-model:active="active">
        <template #trigger="{ active }">
            <o-button
                variant="primary"
                label="Click me!"
                :icon-right="active ? 'caret-up' : 'caret-down'" />
        </template>

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

    <o-button
        label="Open / Close"
        type="primary"
        @click="active = !active" />
</o-field>

JS

import { ref } from "vue";

const active = ref(false);

Class props

'Classes applied to the element'

Dropdown component

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

<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: {   animation: "fade" }
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: {   ariaRole: "list" }
checkScroll	Makes the component check if menu reached scroll start or end and emit scroll events.	boolean	-	From config: dropdown: {   checkScroll: false }
closeable	Dropdown close options (pressing escape, clicking the content or outside)	boolean | string[]	true, false, escape, outside, content	From config: dropdown: {   closeable: ["escape","outside","content"] }
delay	Dropdown delay before it appears (number in ms)	number	-
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: {   maxHeight: 200 }
menuId	HTML element Id of the dropdown menu element	string	-	null
menuTabindex	Tabindex of the dropdown menu element	number	-	null
menuTag	Dropdown menu tag name	DynamicComponent	-	From config: dropdown: {   menuTag: "div" }
mobileBreakpoint	Mobile breakpoint as max-width value	string	-	From config: dropdown: {   mobileBreakpoint: undefined }
mobileModal	Dropdown content (items) are shown into a modal on mobile	boolean	-	From config: dropdown: {   mobileModal: true }
v-model	The selected item value	string | number | object | (string | number | object)[]	-
multiple	Allows multiple selections - converts the modelValue into an array	boolean	-
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: {   position: "bottom-left" }
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: {   teleport: false }
trapFocus	Trap focus inside the dropdown.	boolean	-	From config: dropdown: {   trapFocus: true }
triggerTag	Dropdown trigger tag name	DynamicComponent	-	From config: dropdown: {   triggerTag: "div" }
triggers	Dropdown will be triggered by any events	("focus" | "click" | "hover" | "contextmenu")[]	click, hover, contextmenu, focus	From config: dropdown: {   triggers: ["click"] }

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 state toggle boolean - toggle active state function

DropdownItem component

<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: {   itemAriaRole: "listitem" }
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	-
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: {   itemTag: "div" }
value	Item value (it will be used as v-model of wrapper component) - default is a uuid	string|number|object	-	Default function (see source code)

Events

Event name	Properties	Description
click	value string | number | object - value prop data event 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

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

Current theme ➜ Bootstrap

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

See ➜ 📄 Full scss file