Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
https://getbootstrap.com/docs/5.1/components/dropdowns/Basic
Clickable
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. consequat.
Dropdown stays open on content click
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. consequat.
<!-- dropdown -->
<div class="dropdown">
<a class="btn btn-primary dropdown-toggle" href="#" role="button" id="exDropdown" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="exDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<!-- dropup -->
<div class="dropup">
<a class="btn btn-primary dropdown-toggle" href="#" role="button" id="exDropup" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</a>
<ul class="dropdown-menu" aria-labelledby="exDropup">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<!-- dropstart -->
<div class="dropstart">
<a class="btn btn-primary dropdown-toggle" href="#" role="button" id="exDropstart" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</a>
<ul class="dropdown-menu" aria-labelledby="exDropstart">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<!-- dropend -->
<div class="dropend">
<a class="btn btn-primary dropdown-toggle" href="#" role="button" id="exDropend" data-bs-toggle="dropdown" aria-expanded="false">
Dropend
</a>
<ul class="dropdown-menu" aria-labelledby="exDropend">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<!-- clickable -->
<div class="dropdown">
<a class="btn btn-primary dropdown-toggle" href="#" role="button" id="exClickable" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable
</a>
<div class="dropdown-menu p-4" style="width:350px" aria-labelledby="dropdownMenuLink">
<h6>Dropdown stays open on content click</h6>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
Extended
<!-- Ajax : html -->
<div class="dropdown d-inline-block">
<!--
Required Plugins:
SOW : Dropdown
SOW : Dropdown Ajax
SOW : Dropdown Click Ignore
* If SOW : Ajax Navigation used (like right now in the demo),
ajax links will be active inside dropdown. Just add .js-ajax to the valid links.
Optional:
data-dropdown-ajax-reload-always="true"
Each time a dropdown is clicked, an ajax request is sent to reload the dropdown content.
If .dropdown-menu has .dropdown-menu-hover class (dropdown is open on mouse over), is ignored (except on mobile)
More optional params if needed:
data-dropdown-ajax-method="GET|POST" (default is "GET")
data-dropdown-ajax-contentType="" (jQuery default)
data-dropdown-ajax-dataType="" (jQuery default)
data-dropdown-ajax-loadicon="" (default: "fi fi-circle-spin fi-spin")
-->
<a href="#" id="ddAjax_demo1"
data-dropdown-ajax-source="_ajax/dropdown_ajax.html"
data-bs-toggle="dropdown"
aria-expanded="false"
aria-haspopup="true"
class="btn btn-sm btn-primary btn-pill">
<span class="group-icon">
<i class="fi fi-arrow-end-slim"></i>
<i class="fi fi-arrow-down"></i>
</span>
<span>Ajax : Html</span>
</a>
<!--
Required:
.dropdown-menu-block-md added to .dropdown-menu (mobile, if dropdown has multilevel)
Optional:
.dropdown-menu-hover
-->
<div aria-labelledby="ddAjax_demo1" class="dropdown-menu dropdown-menu-clean dropdown-menu-block-md max-w-200">
<!-- ajax content -->
</div>
</div>
<!-- Ajax : json -->
<div class="dropdown d-inline-block">
<!--
1. Ajax Dropdown Content
The dropdown content is loaded on user interaction only:
- on mouse over (if dropdown is opening on mouse over (click on mobile device))
- on mouse click
++ ++ ++
Curently is set by config to work for links: a[data-bs-toggle="dropdown"]
You can add to config for buttons (separated by comma): button[data-bs-toggle="dropdown"]
Or simply by using a class.
Instead of autoinit by config, the plugin can also be called alone like this:
$.SOW.core.dropdown_ajax.init('a[data-bs-toggle="dropdown"]');
-->
<a href="#" id="ddAjax_demo2"
data-dropdown-ajax-source="_ajax/dropdown_ajax.json"
data-dropdown-ajax-mode="json"
data-bs-toggle="dropdown"
aria-expanded="false"
aria-haspopup="true"
class="btn btn-sm btn-primary btn-pill">
<span class="group-icon">
<i class="fi fi-arrow-end-slim"></i>
<i class="fi fi-arrow-down"></i>
</span>
<span>Ajax : Json</span>
</a>
<!--
Required Plugins:
SOW : Dropdown
SOW : Dropdown Ajax
SOW : Dropdown Click Ignore
* If SOW : Ajax Navigation used (like right now in the demo),
ajax links will be active inside dropdown. Just add .js-ajax to dropdown links.
Optional:
data-dropdown-ajax-reload-always="true"
Each time a dropdown is clicked, an ajax request is sent to reload the dropdown content.
If .dropdown-menu has .dropdown-menu-hover class (dropdown is open on mouse over), is ignored (except on mobile)
More optional params if needed:
data-dropdown-ajax-method="GET|POST" (default is "GET")
data-dropdown-ajax-contentType="" (jQuery|config default)
data-dropdown-ajax-dataType="" (jQuery|config default)
data-dropdown-ajax-loadicon="" (default: "fi fi-circle-spin fi-spin")
data-dropdown-ajax-mode="html|json" html|json ; json = Build dropdown from json data
html structure: _ajax/dropdown_ajax.html
json structure: _ajax/dropdown_ajax.json
see also _ajax/dropdown_ajax.php (for a php example)
Working examples
data-dropdown-ajax-source="_ajax/dropdown_ajax.html"
data-dropdown-ajax-mode="html"
data-dropdown-ajax-source="_ajax/dropdown_ajax.json"
data-dropdown-ajax-mode="json"
data-dropdown-ajax-source="_ajax/dropdown_ajax.php"
data-dropdown-ajax-mode="json"
-->
<div aria-labelledby="ddAjax_demo2" class="dropdown-menu dropdown-menu-clean dropdown-menu-block-md max-w-200">
<!-- ajax content -->
</div>
</div>
<!-- Clean -->
<div class="dropdown d-inline-block">
<a href="#" id="ddHClean_demo1" class="btn btn-sm btn-primary btn-pill" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
<span class="group-icon">
<i class="fi fi-arrow-end-slim"></i>
<i class="fi fi-arrow-down"></i>
</span>
<span>Clean</span>
</a>
<div aria-labelledby="ddHClean_demo1" class="dropdown-menu dropdown-menu-clean dropdown-click-ignore max-w-200">
<div class="dropdown-header">
Clean
</div>
<div class="dropdown-divider"></div>
<div class="scrollable-vertical max-vh-50">
<a class="dropdown-item text-truncate active" href="#">
Active
</a>
<a class="dropdown-item text-truncate disabled" href="#">
Disabled
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
Link 1
</a>
<a class="dropdown-item" href="#">
Link 2
</a>
<a class="dropdown-item max-w-250 text-truncate" href="#">
A long text, very very very long text
</a>
</div>
</div>
</div>
<!-- Bullets -->
<div class="dropdown d-inline-block">
<a href="#" id="ddBullet_demo" class="btn btn-sm btn-primary btn-pill" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
<span class="group-icon">
<i class="fi fi-arrow-end-slim"></i>
<i class="fi fi-arrow-down"></i>
</span>
<span>Bullets</span>
</a>
<div aria-labelledby="ddBullet_demo" class="prefix-link-icon prefix-icon-dot dropdown-menu dropdown-menu-clean dropdown-click-ignore max-w-200">
<div class="dropdown-header">
Bullets
</div>
<div class="dropdown-divider"></div>
<div class="scrollable-vertical max-vh-50">
<a class="dropdown-item text-truncate active" href="#">
Active
</a>
<a class="dropdown-item text-truncate disabled" href="#">
Disabled
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
Link 1
</a>
<a class="dropdown-item" href="#">
Link 2
</a>
<a class="dropdown-item max-w-250 text-truncate" href="#">
A long text, very very very long text
</a>
</div>
</div>
</div>
<!-- Lines -->
<div class="dropdown d-inline-block">
<a href="#" id="ddLine_demo" class="btn btn-sm btn-primary btn-pill" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
<span class="group-icon">
<i class="fi fi-arrow-end-slim"></i>
<i class="fi fi-arrow-down"></i>
</span>
<span>Lines</span>
</a>
<div aria-labelledby="ddLine_demo" class="prefix-link-icon prefix-icon-line dropdown-menu dropdown-menu-clean dropdown-click-ignore max-w-200">
<div class="dropdown-header">
Lines
</div>
<div class="dropdown-divider"></div>
<div class="scrollable-vertical max-vh-50">
<a class="dropdown-item text-truncate active" href="#">
Active
</a>
<a class="dropdown-item text-truncate disabled" href="#">
Disabled
</a>
<a class="dropdown-item" href="#">
Link 1
</a>
<a class="dropdown-item" href="#">
Link 2
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item max-w-250 text-truncate" href="#">
A long text, very very very long text
</a>
</div>
</div>
</div>
<!-- Dark -->
<div class="dropdown d-inline-block">
<a href="#" id="ddHClean_demo2" class="btn btn-sm btn-dark btn-pill" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
<span class="group-icon">
<i class="fi fi-arrow-end-slim"></i>
<i class="fi fi-arrow-down"></i>
</span>
<span>Dark</span>
</a>
<div aria-labelledby="ddHClean_demo2" class="dropdown-menu dropdown-menu-clean dropdown-menu-dark dropdown-click-ignore max-w-200">
<div class="dropdown-header">
Dark Dropdown
</div>
<div class="dropdown-divider"></div>
<div class="scrollable-vertical max-vh-50">
<a class="dropdown-item text-truncate active" href="#">
Active
</a>
<a class="dropdown-item text-truncate disabled" href="#">
Disabled
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
Link 1
</a>
<a class="dropdown-item" href="#">
Link 2
</a>
<a class="dropdown-item max-w-250 text-truncate" href="#">
A long text, very very very long text
</a>
</div>
</div>
</div>
Dropdown Form
<form method="get" class="dropdown">
<input type="text" class="dropdown-toggle form-control" data-bs-toggle="dropdown" placeholder="Product title / SKU">
<div class="dropdown-menu dropdown-click-ignore dropdown-mega-lg p-4">
<h6 class="mb-4">Filter products</h6>
<div class="row g-3">
<div class="col-md-6">
<div class="form-floating mb-3">
<select class="form-select" id="filter-category" aria-label="Category">
<option value="" selected>Any</option>
<option value="1">Shoes</option>
<option value="2">Men tshirt</option>
<option value="3">Women thisrt</option>
</select>
<label for="filter-category">Category</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating mb-3">
<select class="form-select" id="filter-brand" aria-label="Brand">
<option value="" selected>Any</option>
<option value="1">Nike</option>
<option value="2">Adidas</option>
<option value="3">Loreal</option>
</select>
<label for="filter-brand">Brand</label>
</div>
</div>
</div>
<div class="form-check d-block d-sm-inline-block me-2 mb-2">
<input class="form-check-input form-check-input-primary" type="checkbox" value="1" id="filter-saleprice">
<label class="form-check-label user-select-none" for="filter-saleprice">
Sale price
</label>
</div>
<div class="form-check d-block d-sm-inline-block me-2 mb-2">
<input class="form-check-input form-check-input-primary" type="checkbox" value="1" id="filter-preorder">
<label class="form-check-label user-select-none" for="filter-preorder">
Allow preorders
</label>
</div>
<div class="d-flex justify-content-between pt-2">
<button type="submit" class="btn btn-sm btn-primary">Apply filter</button>
<a href="#!" class="btn btn-sm btn-danger btn-soft float-end">Reset</a>
</div>
</div>
</form>
Dropdown Icons
Nothing special, svg icons added
<div class="dropdown">
<a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownIcons" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,6">
Dropdown
<span class="group-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</span>
</a>
<ul class="dropdown-menu shadow-lg p-1" aria-labelledby="dropdownIcons">
<li>
<a class="dropdown-item rounded" href="#">
<svg class="text-gray-600" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
<span>Add Item</span>
</a>
</li>
<li>
<a class="dropdown-item rounded" href="#">
<svg class="text-gray-600" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
<span>Set active</span>
</a>
</li>
<li>
<a class="dropdown-item rounded" href="#">
<svg class="text-gray-600" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
<span>Set inactive</span>
</a>
</li>
<li>
<a class="dropdown-item rounded" href="#">
<svg class="text-gray-600" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 20h9"></path>
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
</svg>
<span>Edit</span>
</a>
</li>
<li>
<a class="dropdown-item rounded" href="#">
<svg class="text-gray-600" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
</svg>
<span>Archive</span>
</a>
</li>
<li>
<a class="dropdown-item rounded" href="#">
<svg class="text-gray-600" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
<span>Some option</span>
</a>
</li>
<li class="dropdown-divider my-2"></li>
<li>
<a class="dropdown-item rounded" href="#">
<svg class="text-danger" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
<span>Delete</span>
</a>
</li>
</ul>
</div>