For information about dropdowns please refer to Bootstrap's documentation.
There are a few extra options available in Ace:
.dropdown-clickable: Add this class to an element in a dropdown menu and when you click on it, dropdown menu won't be hidden.[data-dismiss="dropdown"]: Add this to an element in a dropdown (inside a .dropdown-clickable) and when clicked, dropdown menu will be hidden.
<div class="dropdown-menu ...">
<form class="dropdown-clickable"><!-- click anywhere inside this dropdown -->
.
.
.
.
<button type="submit" data-dismiss="dropdown">Submit</button>
</form>
</div>
- If you have a
FORM[data-submit=dismiss]element inside a dropdown menu and you submit the form, the dropdown will be hidden.- Same thing is true for a
.navbar-collapse. It will be hidden when aFORM[data-submit=dismiss]inside it gets submitted.
- Same thing is true for a
<div class="dropdown-menu ...">
<form class="dropdown-clickable" data-submit="dismiss">
...
</form>
</div>
<div class="collapse navbar-collapse navbar-backdrop" id="navbarSearch">
<form data-submit="dismiss">
...
</form>
</div>
You can use custom CSS classes such as .btn elements to style your dropdowns.
<div class="dropdown-menu p-1 border-t-3 brc-success-tp2 radius-1">
<a class="dropdown-item btn btn-outline-success font-bolder" href="#">
<i class="fas fa-tools bgc-white-tp1 text-orange-d2 radius-1 p-2 mr-1"></i>
Action
</a>
...
</div>
Add animation to dropdowns using .dropdown-animated with following variations:
.dropdown-animated.dropdown-animated.animated-1.dropdown-animated.animated-2
<div class="dropdown-menu dropdown-animated">
...
</div>
<div class="dropdown-menu dropdown-animated animated-2">
...
</div>
Add a backdrop to dropdown by applying .dd-backdrop to its parent:
<div class="dropdown dd-backdrop">
<div class="dropdown-menu">
...
</div>
</div>
<!-- Backdrop only on `md` screen size and below -->
<div class="dropdown dd-backdrop dd-backdrop-none-md">
<div class="dropdown-menu">
...
</div>
</div>
Add a caret to dropdown using .dropdown-caret class:
<div class="dropdown-menu dropdown-caret">
...
</div>
Or by inserting a .dropdown-caret element inside the triggering .dropdown-toggle element.
Useful for navbar with mega dropdowns, so that the caret appears inside the .nav-link button:
<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
...
<div class="dropdown-caret brc-white"></div>
</a>
<div class="dropdown-menu">
...
</div>
</div>
Using .dd-slide-up , .dd-slide-center or .dd-appear-center classes you can make dropdowns slide in from bottom.
You can enable that only on small devices.
For that you should wrap dropdown items inside a .dropdown-inner element:
<div class="dropdown dd-backdrop">
<div class="dropdown-menu dd-slide-up">
<div class="dropdown-inner">
...
</div>
</div>
</div>
<!-- Slide view only on `md` screen size and below -->
<div class="dropdown dd-backdrop dd-backdrop-none-md">
<div class="dropdown-menu dd-slide-center dd-slide-none-md">
<div class="dropdown-inner">
...
</div>
</div>
</div>
<!-- Slide center -->
<div class="dropdown dd-backdrop dd-backdrop-none-md">
<div class="dropdown-menu dd-appear-center dd-slide-none-md">
<div class="dropdown-inner">
...
</div>
</div>
</div>
You can still use dropdown-caret and dropdown-animated classes and they will be apllied in larger screens.
👉 Also please note that, if you have tooltips for dropdown elements in desktop view, they might not be desirable in mobile devices.
You can show some text instead and disable tooltips on small touch-enabled devices:
//don't enable tooltips if device has touch support and a small screen
//instead we show some extra text in dropdowns in small devices
var seemsLikeMobile = 'ontouchstart' in window && window.innerWidth < 770;
if (!seemsLikeMobile) $('[data-tooltip=true])').tooltip({container: 'body', placement: 'auto'});
<!-- dropdown has backdrop and slides up only on `md` screen size and below -->
<div class="dropdown dd-backdrop dd-backdrop-none-md">
<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Show menu
</a>
<div class="dropdown-menu mw-auto dropdown-caret dropdown-animated dd-slide-up dd-slide-none-md">
<div class="dropdown-inner">
<div class="dropdown-header d-md-none border-b-1 brc-grey-l1 mb-2">Header for small devices</div>
<a class="dropdown-item" href="#" data-tooltip="true" data-original-title="Confirm">
<i class="fa fa-check text-success w-2"></i>
<span class="d-md-none">Confirm</span>
</a>
<a class="dropdown-item" href="#" data-tooltip="true" data-original-title="Reject">
<i class="fa fa-times text-danger w-2"></i>
<span class="d-md-none">Reject</span>
</a>
</div>
</div>
</div>
Navbar dropdowns are not different and you can use mega dropdowns in navbar by applying .dropdown-mega to the parent element.
Also for smaller mega dropdowns you can use .dropdown-lg .dropdown-md .dropdown-sm .dropdown-xs .dropdown-xxs and .dropdown-center on the dropdown element:
<li class="nav-item dropdown dropdown-mega">
<a class="nav-link" ...>
<div class="dropdown-caret brc-white"></div><!-- optional caret -->
</a>
<div class="dropdown-menu dropdown-animated dropdown-sm">
...
</div>
</li>
If you add .dropdown-hover to the dropdown menu's parent, it will be displayed on mouse hover:
<li class="dropdown dropdown-hover">
<a class="nav-link" ...>
<div class="dropdown-caret brc-white"></div><!-- optional caret -->
</a>
<div class="dropdown-menu">
...
</div>
</li>