Dropdowns

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.

Example

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.

{% highlight html %} {% endhighlight %}

Dropup Variation

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

Example

{% highlight html %} {% endhighlight %}

Alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

{% highlight html %}

...

{% endhighlight %}

Headers

Add a header to label sections of actions in any dropdown menu.

{% highlight html %}

...
• Dropdown header
...

{% endhighlight %}

Divider

Add a divider to separate series of links in a dropdown menu.

{% highlight html %}

...
...

{% endhighlight %}

Disabled menu items

Add .disabled to a <li> in the dropdown to disable the link.

{% highlight html %}

• Regular link
• Disabled link
• Another link

{% endhighlight %}