Dropdown

Toggleable menu for displaying lists of links and actions.

Basic usage

Hover on the dropdown menu to unfold it for more actions.

The triggering element is rendered by the default slot, and the dropdown part is rendered by the slot named dropdown. By default, dropdown list shows when you hover on the triggering element without having to click it.

Dropdown List

---

<template>
  <b-dropdown>
    <div class="inline-flex items-center">
      <span>Dropdown List</span>
      <b-icon class="ml-2">
        <ActionDown />
      </b-icon>
    </div>
    <template #dropdown>
      <b-dropdown-menu>
        <b-dropdown-item>Action 1</b-dropdown-item>
        <b-dropdown-item>Action 2</b-dropdown-item>
        <b-dropdown-item>Action 3</b-dropdown-item>
        <b-dropdown-item disabled>Action 4</b-dropdown-item>
        <b-dropdown-item divided :icon="Building">Action 5</b-dropdown-item>
      </b-dropdown-menu>
    </template>
  </b-dropdown>
</template>

<script lang="ts" setup>
import { Building, ActionDown } from '@bigin/icons-vue'
</script>

Triggering element

Use the button to trigger the dropdown list.

Use split-button to split the triggering element into a button group with the left button being a normal button and right one the actual triggering target. If you wanna insert a separator line between item three and item four, just add a class divider to item four.

Use the attribute trigger. By default, it is hover.

hover to trigger

Dropdown List

click to trigger

Dropdown List

right click to trigger

Dropdown List

---

<template>
  <b-space>
    <b-dropdown>
      <b-button primary :suffix-icon="ActionDown">Dropdown List</b-button>
      <template #dropdown>
        <b-dropdown-menu>
          <b-dropdown-item>Action 1</b-dropdown-item>
          <b-dropdown-item>Action 2</b-dropdown-item>
          <b-dropdown-item>Action 3</b-dropdown-item>
          <b-dropdown-item>Action 4</b-dropdown-item>
          <b-dropdown-item>Action 5</b-dropdown-item>
        </b-dropdown-menu>
      </template>
    </b-dropdown>
    <b-dropdown split-button type="primary" @click="handleClick">
      Dropdown List
      <template #dropdown>
        <b-dropdown-menu>
          <b-dropdown-item>Action 1</b-dropdown-item>
          <b-dropdown-item>Action 2</b-dropdown-item>
          <b-dropdown-item>Action 3</b-dropdown-item>
          <b-dropdown-item>Action 4</b-dropdown-item>
          <b-dropdown-item>Action 5</b-dropdown-item>
        </b-dropdown-menu>
      </template>
    </b-dropdown>
  </b-space>
  <b-row class="mt-4">
    <b-col>
      <p class="text-sm c-neutral-7 mb-2">hover to trigger</p>
      <b-dropdown>
        <span class="inline-flex items-center">
          <span>Dropdown List</span>
          <b-icon class="ml-2"><ActionDown /></b-icon>
        </span>
        <template #dropdown>
          <b-dropdown-menu>
            <b-dropdown-item>Action 1</b-dropdown-item>
            <b-dropdown-item>Action 2</b-dropdown-item>
            <b-dropdown-item>Action 3</b-dropdown-item>
            <b-dropdown-item>Action 4</b-dropdown-item>
            <b-dropdown-item>Action 5</b-dropdown-item>
          </b-dropdown-menu>
        </template>
      </b-dropdown>
    </b-col>
    <b-col>
      <p class="text-sm c-neutral-7 mb-2">click to trigger</p>
      <b-dropdown trigger="click">
        <span class="b-dropdown-link">
          <span>Dropdown List</span>
          <b-icon class="ml-2"><ActionDown /></b-icon>
        </span>
        <template #dropdown>
          <b-dropdown-menu>
            <b-dropdown-item>Action 1</b-dropdown-item>
            <b-dropdown-item>Action 2</b-dropdown-item>
            <b-dropdown-item>Action 3</b-dropdown-item>
            <b-dropdown-item>Action 4</b-dropdown-item>
            <b-dropdown-item>Action 5</b-dropdown-item>
          </b-dropdown-menu>
        </template>
      </b-dropdown>
    </b-col>
    <b-col>
      <p class="text-sm c-neutral-7 mb-2">right click to trigger</p>
      <b-dropdown trigger="contextmenu">
        <span class="inline-flex items-center">
          <span>Dropdown List</span>
          <b-icon class="ml-2"><ActionDown /></b-icon>
        </span>
        <template #dropdown>
          <b-dropdown-menu>
            <b-dropdown-item>Action 1</b-dropdown-item>
            <b-dropdown-item>Action 2</b-dropdown-item>
            <b-dropdown-item>Action 3</b-dropdown-item>
            <b-dropdown-item>Action 4</b-dropdown-item>
            <b-dropdown-item>Action 5</b-dropdown-item>
          </b-dropdown-menu>
        </template>
      </b-dropdown>
    </b-col>
  </b-row>
</template>

<script lang="ts" setup>
import { ActionDown } from '@bigin/icons-vue'

const handleClick = () => {
  // eslint-disable-next-line no-alert
  alert('button click')
}
</script>

Menu hiding behavior

Use hide-on-click to define if menu closes on clicking.

By default menu will close when you click on menu items, and it can be turned off by setting hide-on-click to false.

Dropdown List

---

<template>
  <b-dropdown :hide-on-click="false">
    <span class="inline-flex items-center">
      <span>Dropdown List</span>
      <b-icon class="ml-2"><ActionDown /></b-icon>
    </span>
    <template #dropdown>
      <b-dropdown-menu>
        <b-dropdown-item>Action 1</b-dropdown-item>
        <b-dropdown-item>Action 2</b-dropdown-item>
        <b-dropdown-item>Action 3</b-dropdown-item>
        <b-dropdown-item disabled>Action 4</b-dropdown-item>
        <b-dropdown-item divided>Action 5</b-dropdown-item>
      </b-dropdown-menu>
    </template>
  </b-dropdown>
</template>

<script lang="ts" setup>
import { ActionDown } from '@bigin/icons-vue'
</script>

Command Event

Clicking each dropdown item fires an event whose parameter is assigned by each item.

Dropdown List

---

<template>
  <b-dropdown @command="handleCommand">
    <span class="inline-flex items-center">
      <span>Dropdown List</span>
      <b-icon class="ml-2"><ActionDown /></b-icon>
    </span>
    <template #dropdown>
      <b-dropdown-menu>
        <b-dropdown-item command="1">Action 1</b-dropdown-item>
        <b-dropdown-item command="2">Action 2</b-dropdown-item>
        <b-dropdown-item command="3">Action 3</b-dropdown-item>
        <b-dropdown-item command="4" disabled>Action 4</b-dropdown-item>
        <b-dropdown-item command="5" divided>Action 5</b-dropdown-item>
      </b-dropdown-menu>
    </template>
  </b-dropdown>
</template>

<script lang="ts" setup>
import { BMessage } from 'bigin-ui'
import { ActionDown } from '@bigin/icons-vue'

const handleCommand = (command: string | number | object) => {
  BMessage(`click on item ${command}`)
}
</script>

Dropdown Methods

You can open or close the dropdown menu by manually use handleOpen or handleClose.

open(close) the Dropdown 2 will close(open) the Dropdown 1.

Dropdown List 1

Dropdown List 2

---

<template>
  <p class="text-md c-neutral-7">
    open(close) the Dropdown 2 will close(open) the Dropdown 1.
  </p>
  <div class="my-4">
    <b-button small @click="showClick">show</b-button>
  </div>
  <b-dropdown ref="dropdown1" trigger="contextmenu" class="mr-6">
    <span class="inline-flex items-center">Dropdown List 1</span>
    <template #dropdown>
      <b-dropdown-menu>
        <b-dropdown-item>Action 1</b-dropdown-item>
        <b-dropdown-item>Action 2</b-dropdown-item>
        <b-dropdown-item>Action 3</b-dropdown-item>
        <b-dropdown-item disabled>Action 4</b-dropdown-item>
        <b-dropdown-item divided>Action 5</b-dropdown-item>
      </b-dropdown-menu>
    </template>
  </b-dropdown>

  <b-dropdown trigger="contextmenu" @visible-change="handleVisible2">
    <span class="inline-flex items-center">Dropdown List 2</span>
    <template #dropdown>
      <b-dropdown-menu>
        <b-dropdown-item>Action 1</b-dropdown-item>
        <b-dropdown-item>Action 2</b-dropdown-item>
        <b-dropdown-item>Action 3</b-dropdown-item>
        <b-dropdown-item disabled>Action 4</b-dropdown-item>
        <b-dropdown-item divided>Action 5</b-dropdown-item>
      </b-dropdown-menu>
    </template>
  </b-dropdown>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const dropdown1 = ref()

const handleVisible2 = (visible: any) => {
  if (visible) {
    dropdown1.value.handleClose()
  } else {
    dropdown1.value.handleOpen()
  }
}

const showClick = () => {
  dropdown1.value.handleOpen()
}
</script>

Sizes

Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios.

Use attribute size to set additional sizes with large, default or small.

---

<template>
  <b-space>
    <b-dropdown size="large" split-button primary>
      Large
      <template #dropdown>
        <b-dropdown-menu>
          <b-dropdown-item>Action 1</b-dropdown-item>
          <b-dropdown-item>Action 2</b-dropdown-item>
          <b-dropdown-item>Action 3</b-dropdown-item>
          <b-dropdown-item>Action 4</b-dropdown-item>
          <b-dropdown-item divided :icon="Building">Action 5</b-dropdown-item>
        </b-dropdown-menu>
      </template>
    </b-dropdown>

    <b-dropdown split-button primary>
      Default
      <template #dropdown>
        <b-dropdown-menu>
          <b-dropdown-item>Action 1</b-dropdown-item>
          <b-dropdown-item>Action 2</b-dropdown-item>
          <b-dropdown-item>Action 3</b-dropdown-item>
          <b-dropdown-item>Action 4</b-dropdown-item>
          <b-dropdown-item divided :icon="Building">Action 5</b-dropdown-item>
        </b-dropdown-menu>
      </template>
    </b-dropdown>

    <b-dropdown size="small" split-button primary>
      Small
      <template #dropdown>
        <b-dropdown-menu>
          <b-dropdown-item>Action 1</b-dropdown-item>
          <b-dropdown-item>Action 2</b-dropdown-item>
          <b-dropdown-item>Action 3</b-dropdown-item>
          <b-dropdown-item>Action 4</b-dropdown-item>
          <b-dropdown-item divided :icon="Building">Action 5</b-dropdown-item>
        </b-dropdown-menu>
      </template>
    </b-dropdown>
  </b-space>
</template>

<script lang="ts" setup>
import { Building } from '@bigin/icons-vue'
</script>

Dropdown Attributes

Attribute	Description	Type	Accepted Values	Default
type	menu button type, refer to Button Component, only works when split-button is true	string	—	—
size	menu size, also works on the split button	string	large / default / small	default
max-height	the max height of menu	string / number	—	—
split-button	whether a button group is displayed	boolean	—	false
disabled	Whether to disable	boolean	—	false
placement	placement of pop menu	string	top/top-start/top-end/bottom/bottom-start/bottom-end	bottom
trigger	how to trigger	string	hover/click/contextmenu	hover
hide-on-click	whether to hide menu after clicking menu-item	boolean	—	true
show-timeout	Delay time before show a dropdown (only works when trigger is hover)	number	—	250
hide-timeout	Delay time before hide a dropdown (only works when trigger is hover)	number	—	150
role	The ARIA role attribute for the dropdown menu. Depending on the use case, you may want to change this to 'navigation'	string	—	'menu'
tabindex	tabindex of Dropdown	number	—	0
popper-class	custom class name for Dropdown's dropdown	string	—	—
popper-options	popper.js parameters	Object	refer to popper.js doc	{ boundariesElement: 'body', gpuAcceleration: false }

Dropdown Slots

Name	Description	Subtags
—	content of Dropdown. Notice: Must be a valid html dom element (ex. <span>, <button> etc.) or el-component, to attach the trigger listener	—
dropdown	content of the Dropdown Menu, usually a <el-dropdown-menu> element	Dropdown-Menu

Dropdown Events

Event Name	Description	Parameters
click	if split-button is true, triggers when left button is clicked	—
command	triggers when a dropdown item is clicked	the command dispatched from the dropdown item
visible-change	triggers when the dropdown appears/disappears	true when it appears, and false otherwise

Dropdown Methods

Method	Description	Parameters
handleOpen	open the dropdown menu	—
handleClose	close the dropdown menu	—

Dropdown-Menu Slots

Name	Description	Subtags
—	content of Dropdown Menu	Dropdown-Item

Dropdown-Item Attributes

Attribute	Description	Type	Accepted Values	Default
command	a command to be dispatched to Dropdown's command callback	string/number/object	—	—
disabled	whether the item is disabled	boolean	—	false
divided	whether a divider is displayed	boolean	—	false
icon	custom icon	string / Component	—	—

Dropdown-Item Slots

Name	Description
—	customize of Dropdown Item