Dropdown

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

Examples

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin. Also, you can trigger dropdown menus above elements by adding .dropup to the parent element.

Action Another action Something else here
Action Another action Something else here

Example


<!-- Dropdown -->
<div class="dropdown">
    <button class="btn btn-base-1 dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
    </button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

<!-- Dropup -->
<div class="dropdown">
    <button class="btn btn-base-1 dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
    </button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

Action Another action Something else here
Action Another action Something else here

Example


<!-- Large buttons -->
<div class="btn-group mr-5">
    <button class="btn btn-base-1 btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Large button
    </button>

    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

<!-- Small buttons -->
<div class="btn-group">
    <button class="btn btn-base-1 btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Small button
    </button>

    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

Change the dropdown sizing with one of the next modifier classes: .dropdown-menu-sm, .dropdown-menu-lg or .dropdown-extend-menu. Add one of these classes on the dropdown menu's main container to see the effects.

Action Another action Something else here
Action Another action Something else here


Extended dropdown

Example


<!-- Large dropdown -->
<div class="btn-group mr-5">
    <button class="btn btn-base-1 dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Large dropdown
    </button>

    <div class="dropdown-menu dropdown-menu-lg">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

<!-- Small dropdown -->
<div class="btn-group">
    <button class="btn btn-base-1 dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Small dropdown
    </button>

    <div class="dropdown-menu dropdown-menu-sm">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

<!-- Extended dropdown -->
<div class="dropdown">
    <a href="#" class="btn btn-base-1 dropdown-toggle" data-toggle="dropdown">
        Extended dropdown
    </a>

    <div class="dropdown-menu dropdown-extend-menu" role="menu">
        <div class="row">
            <div class="col-md-3">
                <a class="dropdown-item" href="#">Alerts</a>
                <a class="dropdown-item" href="#">Animations</a>
                <a class="dropdown-item" href="#">Badges</a>
                <a class="dropdown-item" href="#">Buttons</a>
            </div>

            <div class="col-md-3">
                <a class="dropdown-item" href="#">Button groups</a>
                <a class="dropdown-item" href="#">Cards</a>
                <a class="dropdown-item" href="#">Carousel</a>
                <a class="dropdown-item" href="#">Accordion</a>
            </div>

            <div class="col-md-3">
                <a class="dropdown-item" href="#">Call to action</a>
                <a class="dropdown-item" href="#">Dropdowns</a>
                <a class="dropdown-item" href="#">Forms</a>
                <a class="dropdown-item" href="#">Input groups</a>
            </div>

            <div class="col-md-3">
                <a class="dropdown-item" href="#">List groups</a>
                <a class="dropdown-item" href="#">Modals</a>
                <a class="dropdown-item" href="#">Navs</a>
                <a class="dropdown-item" href="#">Tables</a>
            </div>
        </div>
    </div>
</div>

Schemes

Action Another action Something else here

Example


<div class="dropdown">
<button class="btn btn-base-4 dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Inverse dropdown
</button>

<div class="dropdown-menu dropdown-menu-sm dropdown-menu-inverse">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

Styles

We have built some beautiful dropdown styles that can be used in various scenarios. You can include them in the header, body content or wherever you need them.

User profile

User menu
4 Messages Settings Logoff

Example


<div class="dropdown dropdown--style-2">
    <a class="dropdown-toggle has-badge" href="#" data-toggle="dropdown" aria-expanded="false">
        <img class="dropdown-image rounded-circle" src="PATH_TO_IMAGE">
        <sup class="badge bg-blue">3</sup>
        <span class="dropdown-text strong-600">Destiny Erykah</span>
    </a>
    <div class="dropdown-menu">
    	<h6 class="dropdown-header">User menu</h6>
    	<a class="dropdown-item" href="#">
    		<span class="float-right badge badge-primary">4</span>
    		<i class="ion-ios-email-outline icon-lg text-primary"></i>Messages
    	</a>
    	<a class="dropdown-item" href="#">
    		<i class="ion-ios-gear-outline icon-lg text-primary"></i>Settings
    	</a>
    	<div class="dropdown-divider" role="presentation"></div>
    	<a class="dropdown-item" href="#">
    		<i class="ion-log-out icon-lg text-primary"></i>Logoff
    	</a>
    </div>
</div>

Notifications

Notifications
Bettie Mavis 10:05 PM

Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor

David Wally 11:23 PM

Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor

Bertram Ozzie 12:03 PM

Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor

View all notifications

Example


<div class="dropdown d-inline-block">
    <div class="dropdown dropdown--style-2">
    	<a class="dropdown-icon dropdown-toggle has-notification" href="#" data-toggle="dropdown" aria-expanded="false">
            <i class="ion-ios-bell-outline"></i>
            <sup class="badge bg-base-1"></sup>
    	</a>
        <div class="dropdown-menu dropdown-menu-xl py-0">
            <div class="py-3 px-3">
            	<h5 class="heading heading-sm strong-600 mb-0">Notifications</h5>
            </div>
            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                    <div class="lgi-img">
                        <img src="PATH_TO_IMAGE" class="img-fluid rounded-circle">
                    </div>
                    <div class="lgi-content">
                        <div class="lgi-heading">Bettie Mavis <small>10:05 PM</small></div>
                        <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                    </div>
                </a>
            	...
            </div>
            <div class="py-3 text-center">
            	<a href="#" class="link link-sm link--style-3">View all notifications</a>
            </div>
        </div>
    </div>
</div>