Dropdown

Create simple toggleable submenu.

Basic dropdown

The dropdown is working with a .dropdown class on an element. To trigger it, you have to create an element with the .dropdown-trigger class inside of it.
The dropdown is working with our color palette.

To align your dropdown content with the right border of the dropdown trigger, you just have to add the .right-aligned class on your .dropdown-content.

Constrain width

To constrain the width of the dropdown content to fit the dropdown trigger width, just add the .constrain-width class to your .dropdown-content element.

A dropdown is easily usable inside a navbar, using a .navbar-link as a dropdown trigger.

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.

To know all the ways to initialize a JS component, please read the JS Init page.

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.

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.
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.