Purpose Website UI Kit - Purpose is a unique and beautiful collection of UI elements that are all flexible and modular. A complete and customizable solution to building the website of your dreams.

Dropdowns

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

<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

Result
HTML

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

Result
HTML

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

Result
HTML

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

Result
HTML

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

Result
HTML

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

Result
HTML

<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

Result
HTML

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

Result
HTML

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

Result
HTML

<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

Result
HTML

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

Result
HTML

<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

Result
HTML

<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

Result
HTML

<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

Result
HTML

<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

Result
HTML

<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

Result
HTML

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

Summary

Basic
Options
- Colors
- Sizing
- Directions
- Alignment
Submenu
Menu content
- Headers
- Dividers
- Forms
- Links
- Dark
Examples