Purpose Website UI Kit

Dropdowns

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

Open Bootstrap Docs

Example

Action Another action Something else here
Action Another action Something else here
Separated link
Action Another action Something else here 
<div class="dropdown">
    <button class="btn btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
    </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>
<div class="btn-group">
    <button type="button" class="btn btn-outline-danger">Split button</button>
    <button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Toggle Dropdown</span>
    </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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>
<div class="dropdown">
    <button class="btn btn-outline-primary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fas fa-ellipsis-h"></i>
    </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>

Variations

User menu
4 Messages Settings Sign out
Notifications
JD
Johnyy Depp 10:05 PM

Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor
TC
Tom Cruise 11:30 PM

Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor
WS
Will Smith 15:45 PM

Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor
View all notifications
Action Another action Something else here 
<!-- User account -->
<div class="dropdown">
    <button class="btn btn-primary btn-icon-only rounded-circle" type="button" id="dropdown_user_account" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="btn-inner--icon">
        	<i class="fas fa-user"></i>
        </span> 
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdown_user_account">
    	<h6 class="dropdown-header">User menu</h6>
    	<a class="dropdown-item" href="#">
    		<span class="float-right badge badge-primary">4</span>
    		<i class="fas fa-envelope text-primary"></i>Messages
    	</a>
    	<a class="dropdown-item" href="#">
    		<i class="fas fa-cog text-primary"></i>Settings
    	</a>
    	<div class="dropdown-divider" role="presentation"></div>
    	<a class="dropdown-item" href="#">
    		<i class="fas fa-sign-out-alt text-primary"></i>Sign out
    	</a>
    </div>
</div>
<!-- Notifications -->
<div class="dropdown">
    <button class="btn btn-secondary btn-icon dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="btn-inner--icon">
        	<i class="fas fa-bell"></i>
        </span> 
        <span class="btn-inner--text">Notifications</span>
    </button>
    <div class="dropdown-menu dropdown-menu-xl py-0">
        <div class="py-3 px-3">
        	<h5 class="heading h6 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="list-group-img">
                    <span class="avatar bg-purple">JD</span>
                </div>
                <div class="list-group-content">
                    <div class="list-group-heading">Johnyy Depp <small>10:05 PM</small></div>
                    <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                </div>
            </a>
        	<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                <div class="list-group-img">
                    <span class="avatar bg-pink">TC</span>
                </div>
                <div class="list-group-content">
                    <div class="list-group-heading">Tom Cruise <small>11:30 PM</small></div>
                    <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                </div>
            </a>
            <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                <div class="list-group-img">
                    <span class="avatar bg-blue">WS</span>
                </div>
                <div class="list-group-content">
                    <div class="list-group-heading">Will Smith <small>15:45 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>
<!-- Inverse dropdown -->
<div class="dropdown">
	<button class="btn btn-dark dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Inverse dropdown</button>
	<div class="dropdown-menu 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>

Sizing

Action Another action Something else here
Action Another action Something else here 
<!-- Large dropdown -->
<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdown_large" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Large dropdown
    </button>
    <div class="dropdown-menu dropdown-menu-lg" aria-labelledby="dropdown_large">
        <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="dropdown">
    <button class="btn btn-sm btn-primary dropdown-toggle" type="button" id="dropdown_small" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Small dropdown
    </button>
    <div class="dropdown-menu dropdown-menu-sm" aria-labelledby="dropdown_small">
        <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>