Nuxt Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Nuxt 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 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>
<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>

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>

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>

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>

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>

Base Dropdown Props

PROP NAME TYPE DEFAULT DESCRIPTION    
tag String div Dropdown html tag (e.g div, ul etc)    
titleTag String button Dropdown title (toggle) html tag    
title String N\A Dropdown title    
direction String down Dropdown menu direction (up down)  
icon String N/A Dropdown icon    
titleClasses String Object Array N/A Title css classes
menuClasses String Object N/A Menu css classes  
menuOnRight Boolean N/A Whether menu should appear on the right    

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