tabler/docs/ui/components/dropdowns.md at 93e156bfe11ebbed2cb4b0a5b0c27054aebfe549

Mirrors/tabler

Fork 0

mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00

Files

codecalm 93e156bfe1 Add initial documentation for UI components, utilities, and plugins

2025-02-11 19:12:10 +01:00

10 KiB

Raw Blame History

title, summary, bootstrapLink, description, layout

title	summary	bootstrapLink	description	layout
Dropdowns	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.	components/dropdowns	Organize options with dropdown menus.	default

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.

<div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</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="#">Third action</a>
  </div>
</div>

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

<div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
    <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>
</div>

Active state

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

<div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
    <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>
</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.

<div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
    <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>
</div>

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

<div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
    <span class="dropdown-header">Dropdown header</span>
    <a class="dropdown-item" href="#">
      Action
    </a>
    <a class="dropdown-item" href="#">
      Another action
    </a>
  </div>
</div>

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

<div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
    <span class="dropdown-header">Dropdown header</span>
    <a class="dropdown-item" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon icon-tabler icon-tabler-settings" 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>
        <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"></path>
        <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
      </svg>
      Action
    </a>
    <a class="dropdown-item" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon icon-tabler icon-tabler-pencil" 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>
        <path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4"></path>
        <path d="M13.5 6.5l4 4"></path>
      </svg>
      Another action
    </a>
  </div>
</div>

Add an arrow that points at the dropdown button.

<div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu dropdown-menu-arrow">
    <a class="dropdown-item" href="#">
      Action
    </a>
    <a class="dropdown-item" href="#">
      Another action
    </a>
  </div>
</div>

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

<div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
    <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>
</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">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
    <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>
</div>

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

<div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu dropdown-menu-arrow bg-dark text-white">
    <span class="dropdown-header">Dropdown header</span>
    <a class="dropdown-item" href="#">
      <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="#">
      <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>
</div>

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.

<div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu dropdown-menu-card" style="max-width: 16rem;">
    <div class="card d-flex flex-column">
      <a href="#">
        <img class="card-img-top" src="/samples/photos/friends-at-a-restaurant-drinking-wine.jpg" 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-secondary">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(/samples/avatars/013m.jpg)"></span>
          <div class="ms-3">
            <a href="#" class="text-body">Maryjo Lebarree</a>
            <div class="text-secondary">3 days ago</div>
          </div>
          <div class="ms-auto">
            <a href="#" class="icon d-none d-md-inline-block ms-3 text-secondary">
              <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>

10 KiB Raw Blame History

Default dropdown

Dropdown divider

Active state

Disabled state

Dropdown header

Dropdown with icons

Dropdown with arrow

Dropdown with badge

Dropdown with checkboxes

Dark dropdown

Dropdown with card content

10 KiB

Raw Blame History