1. Docs
  2. Components
  3. Dropdowns
Buy Now Contact

Dropdowns

Provide a list of multiple user-actions.

<div class="c-dropdown dropdown">
    <button class="c-btn c-btn--secondary has-dropdown dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="c-dropdown__menu dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="c-dropdown__item dropdown-item" href="#">Edit Profile</a>
	    <a class="c-dropdown__item dropdown-item" href="#">View Activity</a>
	    <a class="c-dropdown__item dropdown-item" href="#">Manage Roles</a>
    </div>
</div>

Add a small arrow to the avatar by adding has-dropdown class, then use the dropdown functionality to use the avatar as a dropdown toggle.

<div class="c-dropdown dropdown">
    <div class="c-avatar has-dropdown dropdown-toggle" id="dropdownMenuAvatar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <img class="c-avatar__img" src="/img/avatar.jpeg" alt="Name">
    </div>
    <div class="c-dropdown__menu dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuAvatar">
        <a class="c-dropdown__item dropdown-item" href="#">Edit Profile</a>
        <a class="c-dropdown__item dropdown-item" href="#">View Activity</a>
        <a class="c-dropdown__item dropdown-item" href="#">Manage Roles</a>
    </div>
</div>


Javascript

This component’s interactions are powered by Bootstrap. Refer to their dropdown documentation for Javascript usage.

You will notice that for certain components there is a mixture of Dashboard class names and Bootstrap class names that is because Bootstrap’s Javascript requires certain elements to have certain class names. Dashboard components does not use any of these classes for styling.