NobleUI - HTML Bootstrap 5 Admin Dashboard Template

# Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin. Read the Official Bootstrap Documentation for a full list of instructions and other options.

#### Basic Example

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Dropdowns can be triggered from `<a>` or `<button>` elements to better fit your potential needs.

#### Dropdown variations

Add class `.btn-*` for solid colored buttons.

#### Split button

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` for proper spacing around the dropdown caret.

#### Sizing

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

#### Dropup

Trigger dropdown menus above elements by adding `.dropup` to the parent element.

#### Dropright

Trigger dropdown menus at the right of the elements by adding `.dropend` to the parent element.

#### Dropleft

Trigger dropdown menus at the right of the elements by adding `.dropstart` to the parent element.

#### Active menu item

Add `.active` to items in the dropdown to style them as active.

#### Disabled menu item

Add `.disabled` to items in the dropdown to style them as active.

#### Dropdown header

Add a header to label sections of actions in any dropdown menu.

#### Dropdown dividers

Separate groups of related menu items with a divider.

#### Text in dropdown

Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.

#### Forms in dropdown

Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.

Email address
Password