Tabler

Source code Sponsor

Last updates

Example 1
Change deprecated html tags to text decoration classes (#29604)
Example 2
justify-content:between ⇒ justify-content:space-between (#29734)
Example 3
Update change-version.js (#29736)
Example 4
Regenerate package-lock.json (#29730)
Paweł Kuna
UI Designer
Status Profile Feedback
Settings Logout

Documentation

Dropdowns

Bootstrap documentation

Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.

Default dropdown

With small markup changes, you can turn any .btn into a dropdown toggle and use it to display more options for users to choose from. Start with the default dropdown and then use additional classes to make your dropdown more user-friendly.

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

Use dropdown dividers to separate groups of dropdown items for greater clarity.

Action Another action
Separated link 
<div class="dropdown-menu dropdown-menu-demo">
  <a class="dropdown-item" href="#">
    Action
  </a>
  <a class="dropdown-item" href="#">
    Another action
  </a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

Active state

Make a dropdown item look active, so that it highlights when a user hovers over a given option.

Action Another action Active action 
<div class="dropdown-menu dropdown-menu-demo">
  <a class="dropdown-item" href="#">
    Action
  </a>
  <a class="dropdown-item" href="#">
    Another action
  </a>
  <a class="dropdown-item active" href="#">Active action</a>
</div>

Disabled state

Make a dropdown item look disabled to display options which are currently not available but can activate once certain conditions are met.

Action Another action Disabled action 
<div class="dropdown-menu dropdown-menu-demo">
  <a class="dropdown-item" href="#">
    Action
  </a>
  <a class="dropdown-item" href="#">
    Another action
  </a>
  <a class="dropdown-item disabled" href="#">Disabled action</a>
</div>

Add a dropdown header to group dropdown items into sections and name them accordingly.

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

Use icons in your dropdowns to add more visual content and make the options easy to identify for users.

Dropdown header Action Another action 
<div class="dropdown-menu dropdown-menu-demo">
  <span class="dropdown-header">Dropdown header</span>
  <a class="dropdown-item" href="#">
    <!-- Download SVG icon from http://tabler-icons.io/i/settings -->
    <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
    Action
  </a>
  <a class="dropdown-item" href="#">
    <!-- Download SVG icon from http://tabler-icons.io/i/edit -->
    <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg>
    Another action
  </a>
</div>

Add an arrow that points at the dropdown button.

Action Another action 
<div class="dropdown-menu dropdown-menu-demo dropdown-menu-arrow">
  <a class="dropdown-item" href="#">
    Action
  </a>
  <a class="dropdown-item" href="#">
    Another action
  </a>
</div>

Add a badge to your dropdown items to show additional information related to an item or distinguish it from other elements.

Action 12 Another action 
<div class="dropdown-menu dropdown-menu-demo">
  <a class="dropdown-item" href="#">
    Action
    <span class="badge bg-primary ms-auto">12</span>
  </a>
  <a class="dropdown-item" href="#">
    Another action
    <span class="badge bg-green ms-auto"></span>
  </a>
</div>

Use dropdowns with checkboxes to allow users to select options from a predefined list. Dropdowns with checkboxes are particularly useful for filtering.

<div class="dropdown-menu dropdown-menu-demo">
  <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="checkbox"> Option 1</label>
  <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="checkbox"> Option 2</label>
  <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="checkbox"> Option 3</label>
</div>
<div class="dropdown-menu dropdown-menu-demo">
  <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio"> Option 1</label>
  <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio"> Option 2</label>
  <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio"> Option 3</label>
</div>

Dark dropdown

Make your dropdown suit the dark mode of your website or software.

Dropdown header Action Another action 
<div class="dropdown-menu dropdown-menu-demo dropdown-menu-arrow bg-dark text-white">
  <span class="dropdown-header">Dropdown header</span>
  <a class="dropdown-item" href="#">
    <!-- Download SVG icon from http://tabler-icons.io/i/settings -->
    <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
    Action
  </a>
  <a class="dropdown-item" href="#">
    <!-- Download SVG icon from http://tabler-icons.io/i/edit -->
    <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg>
    Another action
  </a>
</div>

Dropdown with card content

Use a dropdown with card content to make it easy for users to get more information on a given subject and avoid ovewhelming them with too much content at once.

Button
Dropdown
How do you know she is a witch?

How do you know she is a witch?

Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...
Maryjo Lebarree
3 days ago
<a href="#" class="btn">
  Button
</a>
<div class="dropdown">
  <a href="#" class="btn btn-primary dropdown-toggle">Dropdown</a>
  <div class="dropdown-menu dropdown-menu-card" style="max-width: 20rem;">
    <div class="card d-flex flex-column">
      <a href="#">
        <img class="card-img-top" src="..." alt="How do you know she is a witch?">
      </a>
      <div class="card-body d-flex flex-column">
        <h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
        <div class="text-muted">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
        <div class="d-flex align-items-center pt-4 mt-auto">
          <span class="avatar" style="background-image: url(...)"></span>
          <div class="ms-3">
            <a href="#" class="text-body">Maryjo Lebarree</a>
            <div class="text-muted">3 days ago</div>
          </div>
          <div class="ms-auto">
            <a href="#" class="icon d-none d-md-inline-block ms-3 text-muted">
              <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>