Dropdowns

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

Basic

<div class="dropdown">
    <button class="btn btn-primary 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>

Options

Colors

Show code

<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</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><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</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><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</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><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</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><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</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><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</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><!-- /btn-group -->

Sizing

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

Show code

<div class="docs-example">
    <div class="btn-group">
        <button class="btn btn-secondary 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 class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </div>
    <div class="btn-group">
        <button class="btn btn-secondary 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 class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </div>
</div><!-- /example -->

Show code

<!-- Large button groups (split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary 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">
    ...
  </div>
</div>

You can also change the dropdown menu’s size by adding .dropdown-menu-sm or .dropdown-menu-lg on the .dropdown-menu element.

Show code

<!-- 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
    </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-primary dropdown-toggle" type="button" id="dropdown_small" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Small
    </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>

Directions

Trigger dropdown menus above elements by adding .dropup, .dropright or .dropleft to the parent element.

Show code

<div class="btn-group dropup">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropup
    </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="btn-group dropright">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropright
    </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="btn-group dropleft">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropleft
    </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>

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.

Show code

<div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Right-aligned menu
    </button>
    <div class="dropdown-menu dropdown-menu-right">
        <button class="dropdown-item" type="button">Action</button>
        <button class="dropdown-item" type="button">Another action</button>
        <button class="dropdown-item" type="button">Something else here</button>
    </div>
</div>

Submenu

Show code

<div class="btn-group">
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Action
    </button>
    <ul class="dropdown-menu">
        <li class="dropdown-submenu">
            <a class="dropdown-item" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action</a>
            <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>
        </li>
        <li>
            <a class="dropdown-item" href="#">Another action</a>
        </li>
        <li>
            <a class="dropdown-item" href="#">Something else here</a>
        </li>
    </ul>
</div>

Headers

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

Show code

Dividers

Separate groups of related menu items with a divider.

Show code

<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>

Forms

Show code

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

Show code

<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-group">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Links

Show code

<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>

Dark

Show code

<div class="dropdown">
	<button class="btn btn-dark dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dark dropdown</button>
	<div class="dropdown-menu dropdown-menu-dark bg-dark">
		<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="dropdown">
	<button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning dropdown</button>
	<div class="dropdown-menu dropdown-menu-dark bg-warning">
		<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>

Examples

Notifications

Show code

<div class="dropdown-menu py-0">
    <div class="list-group list-group-flush">
        <div class="list-group">
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex">
	<div>
		<i class="fas fa-bell mr-3"></i>
	</div>
	<div>
		<div class="text-sm lh-150">
			Mail sent to <span class="text-dark font-weight-bold">Alex Michael</span>
		</div>
		<small class="d-block text-muted">2 hrs ago</small>
	</div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex">
	<div>
		<i class="fas fa-thumbs-up mr-3"></i>
	</div>
	<div>
		<div class="text-sm lh-150">
			You liked a comment from <span class="text-dark font-weight-bold">Sandra Wayne</span>
		</div>
		<small class="d-block text-muted">3 hrs ago</small>
	</div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex">
	<div>
		<i class="fas fa-thumbs-up mr-3"></i>
	</div>
	<div>
		<div class="text-sm lh-150">
			New likes from <span class="text-dark font-weight-bold">Jason Miller</span>
		</div>
		<small class="d-block text-muted">5 hrs ago</small>
	</div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex">
	<div>
		<i class="fas fa-tasks mr-3"></i>
	</div>
	<div>
		<div class="text-sm lh-150">
			You are now in team with <span class="text-dark font-weight-bold">Mike Thomson</span>
		</div>
		<small class="d-block text-muted">2 hrs ago</small>
	</div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex">
	<div>
		<i class="fas fa-envelope mr-3"></i>
	</div>
	<div>
		<div class="text-sm lh-150">
			Mail sent to <span class="text-dark font-weight-bold">Richard Nixon</span>
		</div>
		<small class="d-block text-muted">3 hrs ago</small>
	</div>
</div>

    </a>
    
</div>

    </div>
    <div class="py-3 text-center border-top">
        <a href="#" class="text-sm text-muted font-weight-bold">See all notifications</a>
    </div>
</div>

Messages

Show code

<div class="dropdown-menu py-0">
    <div class="list-group list-group-flush">
        <div class="list-group">
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="2 hrs ago">
    <div>
        
<span class="avatar bg-primary text-white rounded-circle">AM</span>
    </div>
    <div class="flex-fill ml-3">
		<div class="h6 text-sm mb-0">Alex Michael <small class="float-right text-muted">2 hrs ago</small></div>
		<p class="text-sm lh-140 mb-0">
			Some quick example text to build on the card title.
		</p>
    </div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="3 hrs ago">
    <div>
        
<span class="avatar bg-warning text-white rounded-circle">SW</span>
    </div>
    <div class="flex-fill ml-3">
		<div class="h6 text-sm mb-0">Sandra Wayne <small class="float-right text-muted">3 hrs ago</small></div>
		<p class="text-sm lh-140 mb-0">
			Some quick example text to build on the card title.
		</p>
    </div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="5 hrs ago">
    <div>
        
<span class="avatar bg-info text-white rounded-circle">JM</span>
    </div>
    <div class="flex-fill ml-3">
		<div class="h6 text-sm mb-0">Jason Miller <small class="float-right text-muted">5 hrs ago</small></div>
		<p class="text-sm lh-140 mb-0">
			Some quick example text to build on the card title.
		</p>
    </div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="2 hrs ago">
    <div>
        
<span class="avatar bg-dark text-white rounded-circle">MJ</span>
    </div>
    <div class="flex-fill ml-3">
		<div class="h6 text-sm mb-0">Mike Thomson <small class="float-right text-muted">2 hrs ago</small></div>
		<p class="text-sm lh-140 mb-0">
			Some quick example text to build on the card title.
		</p>
    </div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="3 hrs ago">
    <div>
        
<span class="avatar bg-primary text-white rounded-circle">RN</span>
    </div>
    <div class="flex-fill ml-3">
		<div class="h6 text-sm mb-0">Richard Nixon <small class="float-right text-muted">3 hrs ago</small></div>
		<p class="text-sm lh-140 mb-0">
			Some quick example text to build on the card title.
		</p>
    </div>
</div>

    </a>
    
</div>

    </div>
    <div class="py-3 text-center border-top">
        <a href="#" class="text-sm text-muted font-weight-bold">See all messages</a>
    </div>
</div>

Languages

Show code

<ul class="dropdown-menu">
    <li>
        <a class="dropdown-item" href="#">
            <img src="../../assets/img/icons/flags/de.svg"> Deutsch
        </a>
    </li>
    <li>
        <a class="dropdown-item" href="#">
            <img src="../../assets/img/icons/flags/gb.svg"> English(UK)
        </a>
    </li>
    <li>
        <a class="dropdown-item" href="#">
            <img src="../../assets/img/icons/flags/fr.svg"> Français
        </a>
    </li>
</ul>

Dropdowns

Basic

Options

Colors

Sizing

Directions

Alignment

Submenu

Menu content

Headers

Dividers

Forms

Links

Dark

Examples

Notifications

Messages

Languages

Summary

Dropdowns

Basic

Options

Colors

Sizing

Directions

Alignment

Submenu

Menu content

Headers

Dropdown header

Dividers

Forms

Links

User menu

Dark

Examples

Notifications

Messages

Languages

Summary