tabler/docs/content/ui/components/dropdowns.md

title, summary, bootstrapLink, description

title	summary	bootstrapLink	description
Dropdowns	Use dropdowns to display lists of options or include more items 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 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.

{% capture html -%}

Open dropdown

Action Another action Third action

{%- endcapture %} {% include "docs/example.html" html=html height="220px" %}

Dropdown divider

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

{% capture html -%}

Open dropdown

Action Another action

Separated link

{%- endcapture %} {% include "docs/example.html" html=html height="240px" %}

Active state

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

{% capture html -%}

Open dropdown

Action Another action Active action

{%- endcapture %} {% include "docs/example.html" html=html height="220px" %}

Disabled state

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

{% capture html -%}

Open dropdown

Action Another action Disabled action

{%- endcapture %} {% include "docs/example.html" html=html height="220px" %}

Dropdown header

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

{% capture html -%}

Open dropdown

Dropdown header Action Another action

{%- endcapture %} {% include "docs/example.html" html=html height="210px" %}

Dropdown with icons

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

{% capture html -%}

Open dropdown

Dropdown header Action Another action

{%- endcapture %} {% include "docs/example.html" html=html height="210px" %}

Dropdown with arrow

Add an arrow that points at the dropdown button.

{% capture html -%}

Open dropdown

Action Another action

{%- endcapture %} {% include "docs/example.html" html=html height="190px" %}

Dropdown with badge

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

{% capture html -%}

Open dropdown

Action 12 Another action

{%- endcapture %} {% include "docs/example.html" html=html height="190px" %}

Dropdown with checkboxes

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

{% capture html -%}

Open dropdown

Option 1 Option 2 Option 3

{%- endcapture %} {% include "docs/example.html" html=html height="220px" %}

Dark dropdown

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

{% capture html -%}

Open dropdown

Dropdown header Action Another action

{%- endcapture %} {% include "docs/example.html" html=html height="220px" %}

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.

{% capture html -%}

Open dropdown

How do you know she is a witch?

Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit.

Maryjo Lebarree

3 days ago

{%- endcapture %} {% include "docs/example.html" html=html height="520px" %}