Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

import {BaseDropdown} from '@/components'

Global usage

Vue.component(BaseDropdown.name, BaseDropdown)

For local usage

export default {
  components: {
    BaseDropdown
  }
}

Examples

We created a base-dropdown component that can be used to create dropdowns. You can use the defaul trigger which is an <a> or change to a custom one via slot="title" to better fit your potential needs.

<base-dropdown title-classes="btn btn-secondary"
               title="Regular">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</base-dropdown>
Show Code
<base-dropdown title-classes="btn btn-secondary"
               title="Dropdown link">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </base-dropdown>
Show Code

Colors

The best part is you can do this with any button variant, too:

<div class="btn-group">
   <base-dropdown title="Primary" title-classes="btn btn-primary">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </base-dropdown>
   <base-dropdown title="Secondary" title-classes="btn btn-secondary">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </base-dropdown>
   <base-dropdown title="Success" title-classes="btn btn-success">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </base-dropdown>    
   <base-dropdown title="Info" title-classes="btn btn-info">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </base-dropdown>     
   <base-dropdown title="Warning" title-classes="btn btn-warning">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </base-dropdown>  
   <base-dropdown title="Danger" title-classes="btn btn-danger">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </base-dropdown>        
</div>
Show Code

Split button dropdowns

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret. We use this extra class to reduce the horizontal padding on either side of the caret by 25% and remove the margin-left that’s added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button

<div>
  <base-dropdown class="btn-group">
    <template slot="title-container" slot-scope="{isOpen}">
     <base-button type="danger">Action</base-button>
      <base-button type="danger" class="dropdown-toggle dropdown-toggle-split"
                   data-toggle="dropdown"
                   aria-haspopup="true" 
                   :aria-expanded="isOpen">
        <span class="sr-only">Toggle Dropdown</span>
      </base-button>
    </template>
    
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </base-dropdown>
</div>
Show Code

Dropup variation

Trigger dropdown menus above elements by adding .dropup to the parent element.

<base-dropdown class="dropup"
               title-classes="btn btn-secondary"
               title="Dropup">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</base-dropdown>
Show Code

Colors

Set for the menu-classes to .dropdown-black class to change the drodown background’s color.

<base-dropdown menu-classes="dropdown-black"
               title-classes="btn btn-secondary"
               title="Black menu">
    <h6 class="dropdown-header">Dropdown header</h6>
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</base-dropdown>
Show Code

Props

Base dropdown slots

Slot Description
default Default content for dropdown menu
title Dropdown inner title
title-container Dropdown title container (using this slot will require manual dropdown handling)

Base dropdown events

Name Description Params
change Triggered when dropdown is opened/closed the updated value

← Forms →