## Dropdown

Dropdowns have it's specific class `dropdown` and consist of two parts, `dropdown__toggle` and `dropdown__menu` It is important to have those two in order to have porperly styled component.

By default dropdown__menu is positioned left comparing to dropdown__toggle element. For right positioned menu (second example) add class `dropdown--align-right`

Menu items should be `li` elements, containing either `button` or `a` tag.

Example Markup

### Dropdowns opened on the side of the trigger.

Dropdowns have it's specific class `dropdown` and consist of two parts, `dropdown__toggle` and `dropdown__menu` It is important to have those two in order to have porperly styled component.

Example Markup

### Dropdown Append To Body

Add `dropdown-append-to-body` to the `dropdown` element to append to the inner `dropdown-menu` to the body. This is useful when the dropdown button is inside a div with `overflow: hidden`, and the menu would otherwise be hidden.

Example Markup

### Multilevel dropdown

To create a second level in the dropdown menu repeat the initial dropdown structure on the desired `<li>` item of the parent dropdown. The submenu opens by default on the right side of the parent menu, to open it on the left side add the `dropdown__menu--submenu-left` modifier class to the `dropdown__menu` element.

Example Markup

### Navigation dropdown

Example of a dropdown inside a subnavigation element. The dropdown has additional modifiers to align the menu to the right of the toggle and to open the submenu on the left.

Example Markup

### Navigation dropdown with fixed header and footer

Example of a dropdown inside a subnavigation element. The dropdown has additional modifiers to align the menu to the right of the toggle and to open the submenu on the left.

Example Markup