To initialize the Javascript, see the instructions in the **Setup** section at the top of the navigation.

If you need finer control over the creation of dropdowns, for example you have dropdowns that are dynamically rendered, then you can also create dropdowns individualy

```js
//Element is the Vlt-dropdown element
Volta.dropdown.create(Element);

//If you need to handle the open and close of your dropdown, passs true as the second parameter
var dropdown = Volta.dropdown.create(Element, true);
dropdown.open();
dropdown.close();
```

<hr class="hr--tall">

# Reference table

<div class="Vlt-table Vlt-table--data">
|Class |	Behaviour|
|---|---|
|`.Vlt-dropdown__header`	| Header wrapper |
|`.Vlt-dropdown__panel`| Wraps the content of the dropdown that rolls out |
|`.Vlt-dropdown__panel--width2`| Gives the dropdown panel a min-width of 200px |
|`.Vlt-dropdown__panel--width3`| Gives the dropdown panel a min-width of 300px |
|`.Vlt-dropdown__panel--left`| Makes the dropdown panel expand on the left side of the dropdown button |
|`.Vlt-dropdown__panel--nomaxheight`| Removes the limit of 400px for maximum height of a panel. Be careful to only use this in non-dynamic panels or when you're sure there wouldn't be enough options to send the dropdown off screen |
|`.Vlt-dropdown__panel_open`| Alternative way to open the panel |
|`.Vlt-dropdown__panel__content`| Inner wrapper of the content of the dropdown. The double div wrapping allows for better control on the styling |
|`.Vlt-dropdown__link`| Applied to a row in the dropdown (independently from the tag) it adds padding, border and hover styles. |
|`.Vlt-dropdown__link__icon`| To style an icon within a link item |
|`.Vlt-dropdown__link__label`| Wrap the link text in this class if you would like the icon to be right aligned |
|`.Vlt-dropdown__link--border-top`| Adds top border on a link row |
|`.Vlt-dropdown__link_selected`| Adds selected state to a simple dropdown link |
|`.Vlt-dropdown__link--center`| Centers the content of the link |
|`.Vlt-dropdown__link--noclose`| Clicking the link will not close the dropdown (if you're using volta.js) |
|`.Vlt-dropdown__link--nohover`| Remove hover effect |
|`.Vlt-dropdown__block`| Applied to a row in the dropdown (independently from the tag) it adds padding and border. It has display: flex and justify-content: space-between to keep elements in a row and allow for including icons (style included - but the text needs to be wrapped in Vlt-dropdown__label) |
|`.Vlt-dropdown__block--border-top`| Adds top border on a block row |
|`.Vlt-dropdown__block--center`| Centers the content of the block |
|`.Vlt-dropdown__block--nowrap`| Prevents wrapping in a block (default behaviour for links) |
|`.Vlt-dropdown__block--noclose`| Clicking the block will not close the dropdown (if you're using volta.js) |
|`.Vlt-dropdown__label`| Needed to wrap the text of an option in two cases: if you have an icon (as it has flex: 1 it will maintain the right positioning and not be pushed to the right), if you have a dropdown list with visible selection and you're using Volta JS (as it's what's Volta JS looks for to replace the option on the dropdown button) |
</div>