Interactions
Nav dropdown
Elements
The component is always a child of the nav component. It is composed of multiple elements:
nav__item nav__item--dropdownthe wrappernav__triggerthe trigger elementnav__targetthe target element, usually composed of a list ofnav__itemelements
<div class="nav__item nav__item--dropdown">
<button class="nav__trigger">Nav dropdown</button>
<ul class="nav__target">
<li class="nav__item"><a href="" class="nav__trigger">Option 1</a></li>
<li class="nav__item"><a href="" class="nav__trigger">Option 2</a></li>
</ul>
</div>Properties
Add classes to the wrapper class to change the style of the component.
Show
Open a specific dropdown by default
class="nav__item--dropdown js-show"
Dense
If the dropdown is included in a navcomponent with the nav--dense modifier, it will automatically style it accordingly.
Navbar
Automated specific style when the dropdown is used in the navbar component. You do not need to add any specific class