# Dropdowns

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

Bootstrap Documentation

## Basic

Show code

    <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

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

## Menu content

### Headers

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

Show code

    <div class="dropdown-menu">
        <h6 class="dropdown-header">Dropdown header</h6>
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
    </div>

### 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
Email address
Password
Remember me

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