Dropdowns
Dropdowns typically provide a list of items to interact with, however, it is possible to have a complex UI inside dropdowns. FlatifyCSS uses Popper library for positioning dropdowns dynamically, so dropdowns need this library to work as expected and you should include it inside your webpage before FlatifyCSS's JavaScript file.
A simple dropdown
To create a simple dropdown, we need a button (specifically an arrow button) with .dropdown-toggle class, menu with .dropdown class, also they should be wrapped by .dropdown-wrapper class. These are basics and they should have some special classes to work that you can see in the example below.
<div class="dropdown-wrapper">
<!-- a button to toggle show/hide of dropdown -->
<button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button" aria-expanded="false">
Dropdown at bottom
</button>
<!-- dropdown: in this case a menu -->
<ul class="dropdown menu-items-wrapper" aria-labelledby="my-dropdown-toggle">
<li class="menu-item heading">My Account</li>
<li class="menu-item"><a href="#">Sign up</a></li>
<li class="menu-item"><a href="#">Login</a></li>
<li role="separator" class="menu-item separator"></li>
<li class="menu-item"><a href="#">About us</a></li>
<li class="menu-item"><a href="#">Contribute</a></li>
<li class="menu-item"><a href="#">Rate it!</a></li>
<!-- dropdown arrow which is optional -->
<li aria-hidden="true"><span class="pointer-arrow"></span></li>
</ul>
</div>
Accessibility matters!
There is an attribute called aria-labelledby you can read about its use-cases. Simply, it describes dropdown with its toggle text, because it has the ID of the dropdown toggle button, so they are connected like form label for attribute.
Directions
We call them dropdown but they can come from left, right, or top as well. To set a position for dropdown there is an HTML attribute called data-dropdown-direction, it accepts top, bottom (as default), right or left and should be added to the .dropdown element.
<div class="dropdown-wrapper">
<button ...></button>
<ul ... data-dropdown-direction="bottom">
...
</ul>
</div>
<div class="dropdown-wrapper">
<button ...></button>
<ul ... data-dropdown-direction="left">
...
</ul>
</div>
<div class="dropdown-wrapper">
<button ...></button>
<ul ... data-dropdown-direction="top">
...
</ul>
</div>
<div class="dropdown-wrapper">
<button ...></button>
<ul ... data-dropdown-direction="right">
...
</ul>
</div>
Keyboard friendly
Note that dropdowns are keyboard friendly, since pressing ESC will hide active dropdowns.
Autoclose
Dropdowns by default will be closed on clicked outside and inside, you can change this behavior easily with data-dropdown-auto-close HTML attribute for .dropdown element, It accepts:
true (as default) Close dropdown on click outside or inside.
outside Close dropdown when clicked outside of its area
inside Close dropdown when clicked inside of its area
false Do not close dropdown automatically (you need to handle closing dropdown manually or you can use the dropdown close button).
Handle closing dropdown with a button
You might set data-dropdown-auto-close to false and handle dropdown manually, however, there is a button that handles closing dropdown on click, all you need to do is add a button inside .dropdown-wrapper with the .close-dropdown class.
<div class="dropdown-wrapper">
<button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button" aria-expanded="false">
Close button
</button>
<ul class="dropdown menu-items-wrapper" aria-labelledby="my-dropdown-toggle" data-dropdown-auto-close="false">
<li class="position-absolute place-top place-right">
<button
class="close-dropdown close-button size-xs"
style="margin: 1.2em 0.64em"
aria-label="Close dropdown"
></button>
</li>
<li class="menu-item heading">My Account</li>
<li class="menu-item"><a>Sign up</a></li>
<li class="menu-item"><a>Login</a></li>
<li aria-hidden="true"><span class="pointer-arrow"></span></li>
</ul>
</div>
Split button
This is common for dropdowns to be opened by an arrow button that is stuck with a button, they are called split buttons. It is simply doable with buttons and button group.
Items group mockup
Items group is a mockup component that is well suited as dropdown items, read more here.
Sizes
To change the drop size use size setter classes.
These classes just set a font-size property so it is possible to change it yourself by writing custom CSS.
<div class="dropdown-wrapper size-xs">...</div>
<div class="dropdown-wrapper size-md">...</div>
<div class="dropdown-wrapper size-2x">...</div>
Colors
There are helper classes for styling elements like dropdown, first read about color setter classes.
warning
Do not add color setter classes to .dropdown-wrapper, inside the wrapper there are a button and dropdown and they are generally separate components, so you should add color setter classes to button and dropdown separately.
<div class="dropdown-wrapper">
<button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button style-green" aria-expanded="false">
Large
</button>
<ul class="dropdown menu-items-wrapper style-green-light" aria-labelledby="my-dropdown-toggle">
<li class="menu-item heading">My Account</li>
<li class="menu-item"><a>Sign up</a></li>
<li class="menu-item"><a>Login</a></li>
<li aria-hidden="true"><span class="pointer-arrow"></span></li>
</ul>
</div>
Customization
You can customize dropdowns, they offer you CSS variables to change, as you might be noticed a typical dropdown uses menu items because it is a submenu, to customize them check menu component customization. These are dropdowns CSS variables:
--flatify__submenu-bg-color
--flatify__submenu-txt-color
--flatify__submenu-border-color
--flatify__dropdown-animation-show-duration
--flatify__dropdown-animation-hide-duration
--flatify__dropdown-animation-show
--flatify__dropdown-animation-hide
It is possible to change colors, animations duration, or change the whole animation, here is an example of customized dropdown:
<div class="dropdown-wrapper my-custom-dropdown">...</div>
@keyframes my-dropdown-show-animation {
from {
opacity: 0;
transform: scale(1.2) rotate(90deg);
}
to {
opacity: 1;
transform: scale(1) rotate(0);
}
}
@keyframes my-dropdown-hide-animation {
from {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
to {
transform: scale(0);
}
}
.my-custom-dropdown {
/* dropdown */
--flatify__dropdown-animation-show: my-dropdown-show-animation 500ms ease;
--flatify__dropdown-animation-hide: my-dropdown-hide-animation 500ms ease;
/* submenu */
--flatify__submenu-bg-color: #d8334a;
--flatify__submenu-txt-color: #f5f7fa;
--flatify__submenu-border-color: #bf263c;
/* submenu items */
--flatify__submenu-item-bg-color: #bf263c;
--flatify__submenu-item-txt-color: #f5f7fa;
--flatify__submenu-item-bg-color__hover: #a0d468;
--flatify__submenu-item-bg-color__focus: #ffce54;
--flatify__submenu-item-txt-color__hover: #3c3b3d;
--flatify__submenu-item-txt-color__focus: #bf263c;
}