Dropdown
Create simple toggleable submenu.
Basic dropdown
The dropdown is working with a .dropdown class on an element. To trigger it, you
have to add a .data-target refering to the dropdown element inside of it.
The dropdown is working with our
color palette.
Right aligned dropdown content
To align your dropdown content with the right border of the dropdown trigger, you just have to add the
.dropdown-right class on your .dropdown-content.
Constrain width
To constrain the width of the dropdown content to fit the dropdown trigger width, just add the
.dropdown-constrain-width class to your .dropdown-content
element.
Dropdown inside a navbar
A dropdown is easily usable inside a navbar, using a .navbar-link as a dropdown
trigger.
Animated dropdown
The animationType option is activable through the JS initialization. the 'fade' one is creating a smooth fade in
animation of the dropdown content.
Note that this option is not working with the hover option.
JavaScript initialization
Once HTML was setup, you can activate the dropdown with this simple code.
Just pass the id of your dropdown that you want to activate.
Options
| Property | Default value | Description |
|---|---|---|
| hover | false | Dropdown shown when hover event is triggered instead of click event. |
| animationType | 'none' |
Choose animation type when dropdown is opened or closed. Accepted values are 'none' or 'fade'.
|
| animationDuration | 300 | Opening and closing animation duration in ms. |
| autoClose | true | Closes other dropdown when this Dropdown instance is opened. |
| closeOnClick | true | Closes the dropdown by clicking outside of it. |
| preventViewport | false | Prevent dropdown content to exceed viewport size. |
Methods
| Method | Description |
|---|---|
| .open() | Open dropdown |
| .close() | Close dropdown |
Events
| Event | Description |
|---|---|
| ax.dropdown.setup | Event sent when the dropdown has been setup. |
| ax.dropdown.open | Event sent when the open() method is called. |
| ax.dropdown.opened | Event sent when the dropdown has been opened. |
| ax.dropdown.close | Event sent when the close() method is called. |
| ax.dropdown.closed | Event sent when the dropdown has been closed. |
Styling
| CSS Variable | Default value | Description |
|---|---|---|
--ax-dropdown-z-index
|
10 | Dropdown z-index. |
--ax-dropdown-z-index-navbar
|
20 | Dropdown z-index inside a navbar. |
--ax-dropdown-z-index-sidenav
|
30 | Dropdown z-index inside a sidenav. |
