{% set title = 'Dropdown' %} {% set filename = 'component-dropdown.html' %} {% extends 'src/layouts/master.html' %} {% block content %}

### Dropdown

Multi-purpose dropdown component with tons of variations.

#### Basic

#### Split Dropdowns

To create a split button add class `.dropdown-toggle-split` with your dropdown toggle class and to add divider between dropdown item use class `.doprdown-divider`

#### Dropdown with Icons & Emoji

Use `.dropdown-item-emoji` within `.dropdown-item` for font-size and spacing of emojis.

#### Directions

Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu. Trigger dropdown menus at the up / right / left of the elements by adding `.dropup | .dropright | .dropleft` to the parent element.

#### Sizes

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

#### Options

Use `data-offset` or `data-reference` attributes to change the location of the dropdown.

#### Variations

To create a dropdown with groups you can use .dropdown-header for the header of groups and for separation of group you can use `.dropdown-divider`.

To create a dropdown with icons use class `.dropdown-icon-wrapper` with `.dropdown`.

{% endblock %}