mirror of
https://github.com/tabler/tabler.git
synced 2026-07-30 06:54:39 +04:00
codecalm
100 lines
2.7 KiB
Markdown
100 lines
2.7 KiB
Markdown
---
|
||
title: Dropdowns
|
||
description: Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
|
||
bootstrap-link: components/dropdowns
|
||
toc: true
|
||
---
|
||
|
||
## Default dropdown
|
||
|
||
Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here’s how you can do this:
|
||
|
||
{% capture code %}
|
||
{% include ui/dropdown-menu.html show=true %}
|
||
{% endcapture %}
|
||
{% include example.html code=code centered=true %}
|
||
|
||
## Dropdown divider
|
||
|
||
Separate groups of related menu items with a divider.
|
||
|
||
{% capture code %}
|
||
{% include ui/dropdown-menu.html show=true separated=true %}
|
||
{% endcapture %}
|
||
{% include example.html code=code centered=true %}
|
||
|
||
## Active state
|
||
|
||
{% capture code %}
|
||
{% include ui/dropdown-menu.html show=true active=true %}
|
||
{% endcapture %}
|
||
{% include example.html code=code centered=true %}
|
||
|
||
## Disabled state
|
||
|
||
{% capture code %}
|
||
{% include ui/dropdown-menu.html show=true disabled=true %}
|
||
{% endcapture %}
|
||
{% include example.html code=code centered=true %}
|
||
|
||
## Dropdown header
|
||
|
||
Add a header to label sections of actions in any dropdown menu.
|
||
|
||
{% capture code %}
|
||
{% include ui/dropdown-menu.html show=true header=true %}
|
||
{% endcapture %}
|
||
{% include example.html code=code centered=true %}
|
||
|
||
## Dropdown with icons
|
||
|
||
{% capture code %}
|
||
{% include ui/dropdown-menu.html show=true icons=true header=true %}
|
||
{% endcapture %}
|
||
{% include example.html code=code centered=true %}
|
||
|
||
## Dropdown with arrow
|
||
|
||
{% capture code %}
|
||
{% include ui/dropdown-menu.html show=true arrow=true %}
|
||
{% endcapture %}
|
||
{% include example.html code=code centered=true %}
|
||
|
||
## Dropdown with badge
|
||
|
||
{% capture code %}
|
||
{% include ui/dropdown-menu.html show=true badge=true %}
|
||
{% endcapture %}
|
||
{% include example.html code=code centered=true %}
|
||
|
||
## Dropdown with checkboxes
|
||
|
||
{% capture code %}
|
||
{% include ui/dropdown-menu.html show=true check=true %}
|
||
{% endcapture %}
|
||
{% include example.html code=code centered=true %}
|
||
|
||
{% capture code %}
|
||
{% include ui/dropdown-menu.html show=true radio=true %}
|
||
{% endcapture %}
|
||
{% include example.html code=code centered=true %}
|
||
|
||
## Dark dropdown
|
||
|
||
{% capture code %}
|
||
{% include ui/dropdown-menu.html show=true dark=true header=true icons=true arrow=true %}
|
||
{% endcapture %}
|
||
{% include example.html code=code centered=true %}
|
||
|
||
## Dropdown with card content
|
||
|
||
{% capture code %}
|
||
{% include ui/button.html color="secondary" text="Button" %}
|
||
<div class="dropdown{% hide %} show{% endhide %}">
|
||
<a href="#" class="btn btn-primary dropdown-toggle">Dropdown</a>
|
||
<div class="dropdown-menu dropdown-menu-card{% hide %} show position-static{% endhide %}" style="max-width: 20rem;">
|
||
{% include cards/blog-single.html type="image" %}
|
||
</div>
|
||
</div>
|
||
{% endcapture %}
|
||
{% include example.html code=code centered=true wrapper="btn-list align-items-start" %} |