lintel-contrib-dropdowns

Dropdowns for lintel.

Getting Started

This module requires Lintel.

If you haven't used Lintel before, be sure to check out the Getting Started guide, as it explains how to install and use this module. Once you're familiar with that process, you may install this module with this command:

bower install lintel-contrib-dropdowns --save

Once the module has been installed, you will have to load it in your main SASS file:

@import "bower_components/lintel-contrib-dropdowns/sass/dropdowns.scss"

This module also includes a JavaScript component, which you will have to load separately.

<script src="bower_components/lintel-contrib-dropdowns/dist/dropdowns.min.js" type="text/javascript"></script>

You can use wiredep or grunt-wiredep to automatically inject files in your build process.

Variables

Check the vars file in the sass folder to see the full list of variables you can customize.

$dropdown-*

Variables relating to the dropdown list.

$dropdown-item-*

Variables relating to individual items (<a>s).

$dropdown-divider-*

Variables related to the dropdown divider.

JavaScript

Options

Name	Type	Default	Description
onShow	function		Callback function to execute every time dropdown is shown.
onHide	function		Callback function to execute every time dropdown is hidden.
esc	boolean	true	Close modal on escape key.

Methods

Name	Description
toggle	Toggle dropdown.
show	Show dropdown.
hide	Hide modal.

Events

Event	Description
show.lt.dropdown	Fires immediately before dropdown is shown. Can prevent dropdown from showing here.
shown.lt.dropdown	Fires immediately after dropdown is shown.
hide.lt.dropdown	Fires immediately before dropdown is hidden. Can prevent dropdown from hiding here.
hidden.lt.dropdown	Fires immediately after dropdown is hidden.

Data-attr

Add data-toggle="dropdown" to the .btn-dropdown-toggle. You can add additional options as data-attributes.

<div class="btn-group">
  <button class="btn btn-dropdown-toggle" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
    Dropdown
    <span class="btn-caret" aria-hidden="true"></span>
  </button>
  <ul class="dropdown" role="menu">
    ...
  </ul>
</div>

jQuery

Call the jQuery plugin on the modal, passing in any options and the related target (button).

var options = {
  onShow: function(menu, button) {
    console.log('onShow', this, menu, button);
  },
  onHide: function(menu, button) {
    console.log('onHide', this, menu, button);
  },
  esc: false
};
 
$('#myButton').click(function(e) {
  $(this).dropdown(options);  // this == #myButton
});

Alternatively, you can use the default options:

$('#myButton').click(function(e) {
  $(this).dropdown('toggle'); // this == #myButton
});

Examples

Single Dropdown

<div class="btn-group">
  <button class="btn btn-dropdown-toggle" type="button" aria-expanded="false">
    Dropdown
    <span class="btn-caret" aria-hidden="true"></span>
  </button>
  <ul class="dropdown" role="menu">
    <li><a href="#">Action 1</a></li>
    <li><a href="#">Action 2</a></li>
    <li><a href="#">Action 3</a></li>
  </ul>
</div>

Split Dropdown

<div class="btn-group">
  <button class="btn" type="button" aria-expanded="false">Split Dropdown</button>
  <button class="btn btn-dropdown-toggle" type="button" aria-label="More Options"><span class="btn-caret" aria-hidden="true"></span></button>
  <ul class="dropdown" role="menu">
    <li><a href="#">Action 1</a></li>
    <li><a href="#">Action 2</a></li>
    <li><a href="#">Action 3</a></li>
    <li class="dropdown-divider"></li>
    <li><a href="#">Alt Action 1</a></li>
  </ul>
</div>

Open Dropdown

The javascript component of this library will take care of the .open and aria-expanded property.

<div class="btn-group open">
  <button class="btn btn-dropdown-toggle" type="button" aria-expanded="true">...</button>
  ...
</div>

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.