<

Voyager
Voyager

Dropdowns

Dropdowns give us the ability to toggle an overlaying list or menu of links. They let a user select a single item from this list.

Info:

For dropdowns we utilize the Bootstrap library. All of the base markup should be the same as how Bootstrap structures their dropdowns.

Control Styles

There are two different base options for your control. You can either use a button or a button link. The difference between the two is the prominence the component has within the UI.

Any Button style can be used, but the .btn-default class is the primary dropdown button controls.

Dropdown Indicator

Add a .caret as the indicator for a dropdown, not a chevron.

Do:

Use the icon .fa-caret-down.

Don't:

Use the icon .fa-chevron-down.

Variants

Menu Sizes

Name Example Notes
Small Menu

Add .qw-dropdown-sm to the .dropdown-menu to make a small dropdown menu (min-width of 100px). Should only be used with small buttons and 'link' buttons
Large Menu

Add .qw-dropdown-lg to the .dropdown-menu to make a Large dropdown menu (min-width of 340px). Note: Currently only used for Bell Notifications.

Full Width

No extra class needs to be added to make the menu full width to match your button block. as long as you have the .btn-block class to your control component.
Mega Menu

The dropdown mega menu is used when there is an unknown amount of list items, so there is a need for multiple columns in the dropdown. First the class .qw-dropdown-mega must be added along with .dropdown-menu. Then a second ul element should be added within the first li element. On that ul element there will either be a hard coded class for columns added, or a variable class that will select the right column class based on how many items will be in the menu. That class will be .qw-dropdown-col-2 or whatever number of columns you need in the menu.
HTML

<ul class="dropdown-menu qw-dropdown-mega">
    <li">
        <ul class="qw-dropdown-col-2" role="menu">
            <li><a href="#">List Item 1</a></li>
            <li><a href="#">List Item 2</a></li>
            <li><a href="#">List Item 3</a></li>
            <li><a href="#">List Item 4</a></li>
            <li><a href="#">List Item 5</a></li>
            <li><a href="#">List Item 6</a></li>
            <li><a href="#">List Item 7</a></li>
            <li><a href="#">List Item 8</a></li>
            <li><a href="#">List Item 9</a></li>
        </ul>
    </li>
</a>

Dropdown Direction

To align the dropdown menu's contents to the right side of the dropdown button, add .dropdown-menu-right to the .dropdown-menu.

HTML Copy 

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Dropdown
    </button>
    <ul class="dropdown-menu dropdown-menu-right" role="menu">
        . . .
    </ul>
</div>