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>

Options

Show code

HTML

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

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

JS

import { ref } from "vue";
import type { OptionsProp } from "@oruga-ui/oruga-next";

const options: OptionsProp<string> = [
    { label: "Flint", value: "flint" },
    { label: "Silver", value: "silver" },
    { label: "Vane", value: "vane" },
    { label: "Billy", value: "billy" },
    { label: "Jack", value: "silver", attrs: { disabled: true } },
];

const selected = ref<string>();

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			-	false
animation			-	From config: dropdown: {   animation: "fade" }
ariaRole			-	From config: dropdown: {   ariaRole: "list" }
checkScroll			-	From config: dropdown: {   checkScroll: false }
closeable			-	From config: dropdown: {   closeable: ["escape","outside","content"] }
delay			-
desktopModal			-	From config: dropdown: {   desktopModal: false }
disabled			-	false
expanded			-	false
inline			-	false
label			-
maxHeight			-	From config: dropdown: {   maxHeight: 200 }
menuId			-	null
menuTabindex			-	null
menuTag			-	From config: dropdown: {   menuTag: "div" }
mobileBreakpoint			-	From config: dropdown: {   mobileBreakpoint: undefined }
mobileModal			-	From config: dropdown: {   mobileModal: true }
v-model			-
options			-
override			-
position			-	From config: dropdown: {   position: "bottom-left" }
scrollable			-	false
tabindex			-	0
teleport			-	From config: dropdown: {   teleport: false }
trapFocus			-	From config: dropdown: {   trapFocus: true }
triggerTag			-	From config: dropdown: {   triggerTag: "div" }
triggers			-	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 an 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

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