Dropdown

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

---

edit on github

Examples

Base

<template>
  <section>
    <o-dropdown aria-role="list">
      <o-button variant="primary" slot="trigger" slot-scope="{ active }">
        <span>Click me!</span>
        <o-icon :icon="active ? 'caret-up' : 'caret-down'"></o-icon>
      </o-button>

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

    <o-dropdown :triggers="['hover']" aria-role="list">
      <o-button variant="info" slot="trigger">
        <span>Hover me!</span>
        <o-icon icon="caret-down"></o-icon>
      </o-button>

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

    <o-dropdown disabled aria-role="list">
      <o-button slot="trigger">
        <span>Disabled</span>
        <o-icon icon="caret-down"></o-icon>
      </o-button>

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

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

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

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

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

<script>
  export default {}
</script>

Multiple

<template>
  <section>
    <p class="content"><b>selected</b>: {{ selectedOptions }}</p>
    <o-dropdown v-model="selectedOptions" multiple aria-role="list">
      <o-button variant="primary" type="button" slot="trigger">
        <span>Selected ({{ selectedOptions.length }})</span>
        <o-icon icon="caret-down"></o-icon>
      </o-button>

      <o-dropdown-item value="option1" aria-role="listitem">
        <span>Option 1</span>
      </o-dropdown-item>

      <o-dropdown-item value="option2" aria-role="listitem">
        <span>Option 2</span>
      </o-dropdown-item>

      <o-dropdown-item value="option3" aria-role="listitem">
        <span>Option 3</span>
      </o-dropdown-item>
    </o-dropdown>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        selectedOptions: []
      }
    }
  }
</script>

Scrollable

<template>
  <section>
    <div class="block">
      <o-field>
        <o-switch v-model="isScrollable">Scrollable</o-switch>
      </o-field>
    </div>

    <br />

    <o-dropdown :scrollable="isScrollable" :max-height="maxHeight" v-model="currentMenu" aria-role="list">
      <o-button variant="primary" type="button" slot="trigger">
        <template>
          <o-icon :icon="currentMenu.icon"></o-icon>
          <span>{{currentMenu.text}}</span>
        </template>
        <o-icon icon="caret-down"></o-icon>
      </o-button>

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

<script>
  export default {
    data() {
      return {
        isScrollable: true,
        maxHeight: 200,
        currentMenu: { icon: 'users', text: 'People' },
        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' }
        ]
      }
    }
  }
</script>

<style>
  .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;
  }
</style>

Class props

📄 Full scss file

Action

Another action

Something else

How does Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link (▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.
🔍 This icon indicates that you should pay attention to CSS specificity. See "Deal with specificity" section in the documentation.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop. You'll find more info in the "Overriding section".

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.

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	-
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	-
maxHeight	Max height of dropdown content	string|number	-	From config dropdown: {   maxHeight: 200 }
menuTag	Dropdown menu tag name	string	-	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	Override classes	boolean	-	false
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
active-change
change
input

Slots

Name	Description	Bindings
trigger
default

---

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	-
override	Override classes	boolean	-	false
tabindex		number|string	-	0
tag	Dropdown item tag name	string	-	From config dropdown: {   itemTag: 'div' }
value	The value that will be returned on events and v-model	string|number|boolean|object|array	-	null

Events

Event name	Properties	Description
click

Slots

Name	Description	Bindings
default

Style

CSS Variable	SASS Variable	Default
--oruga-dropdown-disabled-opacity	$dropdown-disabled-opacity	$base-disabled-opacity
--oruga-dropdown-item-active-background-color	$dropdown-item-active-background-color	$primary
--oruga-dropdown-item-active-color	$dropdown-item-active-color	$primary-invert
--oruga-dropdown-item-color	$dropdown-item-color	#000000
--oruga-dropdown-item-disabled-opacity	$dropdown-item-disabled-opacity	$base-disabled-opacity
--oruga-dropdown-item-font-size	$dropdown-item-font-size	$base-font-size
--oruga-dropdown-item-hover-background-color	$dropdown-item-hover-background-color	#f5f5f5
--oruga-dropdown-item-hover-color	$dropdown-item-hover-color	#000000
--oruga-dropdown-item-line-height	$dropdown-item-line-height	$base-line-height
--oruga-dropdown-item-padding	$dropdown-item-padding	.375rem 1rem
--oruga-dropdown-item-font-weight	$dropdown-item-font-weight	400
--oruga-dropdown-menu-background	$dropdown-menu-background	#ffffff
--oruga-dropdown-menu-border-radius	$dropdown-menu-border-radius	$base-border-radius
--oruga-dropdown-menu-box-shadow	$dropdown-menu-box-shadow	0 0.5em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02)
--oruga-dropdown-menu-margin	$dropdown-menu-margin	0
--oruga-dropdown-menu-padding	$dropdown-menu-padding	.5rem 0 .5rem 0
--oruga-dropdown-menu-width	$dropdown-menu-width	12rem
--oruga-dropdown-menu-zindex	$dropdown-menu-zindex	20
--oruga-dropdown-mobile-max-height	$dropdown-mobile-max-height	calc(100vh - 120px)
--oruga-dropdown-mobile-max-width	$dropdown-mobile-max-width	460px
--oruga-dropdown-mobile-overlay-color	$dropdown-mobile-overlay-color	rgba(#000000, 0.86)
--oruga-dropdown-mobile-overlay-zindex	$dropdown-mobile-overlay-zindex	40
--oruga-dropdown-mobile-width	$dropdown-mobile-width	calc(100vw - 40px)
--oruga-dropdown-mobile-zindex	$dropdown-mobile-zindex	50