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

Dropdowns

Provide a list of multiple user-actions.

Edit Profile View Activity Manage Roles 

<div class="c-dropdown dropdown">
    <button class="c-btn c-btn--secondary has-icon dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <i class="feather icon-chevron-down"></i></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>

Use the avatar as a dropdown toggle.

Edit Profile View Activity Manage Roles 
<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 Neat class names and Bootstrap class names that is because Bootstrap’s Javascript requires certain elements to have certain class names. Neat components does not use any of these classes for styling.

Contents: