#### Single button dropdowns

Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either `<button>` elements:

Dropdown link

#### Custom Dropdown Arrow

Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either `<button>` elements:

#### Variant

The best part is you can do this with any button variant, too:

#### Dropup variation

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

#### Dropend variation

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

#### Disabled Item

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

#### Dark dropdowns

Opt into darker dropdowns to match a dark navbar or custom style by adding `.dropdown-menu-dark` onto an existing `.dropdown-menu`. No changes are required to the dropdown items.

#### Dropdown options

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

#### Text

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.

#### Menu alignment

Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu.

#### Split button dropdowns

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.

#### Dropstart variation

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

#### Active Item

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

#### Headers

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

#### Centered dropdowns

Make the dropdown menu centered below the toggle with `.dropdown-center` on the parent element.

#### Auto close behavior

By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the `autoClose` option to change this behavior of the dropdown.

#### Forms

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.

##### Theme Settings

##### Color Scheme

##### Light

##### Dark

##### Layout Mode

##### Fluid

##### Detached

##### Menu Color

##### Light

##### Dark

##### Sidebar Size

##### Default

##### Compact

##### Condensed

##### Hover View

##### Full Layout

##### Hidden

##### Container Width

Full Boxed

##### Layout Position

Fixed Scrollable
Buy Now