# Bootstrap 5 Dropdowns Bootstrap 5 dropdown examples for AdminKit PRO: sizing, menu items, left and right menu alignment, menu content and dropdown options. > This feature is only available in **AdminKit PRO**. [Learn more](/pricing/). ## Examples 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 `` or ` ``` And with `` elements: ```html
``` This works with any button variant: ```html
``` ### 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. We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that's added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button. ```html
``` ## Sizing Button dropdowns work with buttons of all sizes, including default and split dropdown buttons. ```html
``` ```html
``` ## Menu items Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use ` ``` You can also create non-interactive dropdown items with `.dropdown-item-text`. Feel free to style further with custom CSS or text utilities. ```html ``` ### Active Add `.active` to items in the dropdown to style them as active. To convey the active state to assistive technologies, use the `aria-current` attribute, with the `page` value for the current page or `true` for the current item in a set. ```html ``` ### Disabled Add `.disabled` to items in the dropdown to style them as disabled. ```html ``` ## Menu alignment By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. You can change this with the directional `.drop*` classes, but you can also control them with additional modifier classes. Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu. ```html
``` ### Alignment options Taking most of the options shown above, here's a small kitchen sink demo of various dropdown alignment options in one place. ```html
``` ## Menu content ### Headers Add a header to label sections of actions in any dropdown menu. ```html ``` ### Dividers Separate groups of related menu items with a divider. ```html ``` ### Text Place any freeform text within a dropdown menu with text and use [spacing utilities](/bootstrap/docs/utilities/spacing/). Note that you'll likely need additional sizing styles to constrain the menu width. ```html

Some example text that's free-flowing within the dropdown menu.

And this is more example text.

``` ### Forms Put a form within a dropdown menu, or make it into a dropdown menu, and use [margin or padding utilities](/bootstrap/docs/utilities/spacing/) to give it the negative space you require. ```html
New around here? Sign up Forgot password?
``` ## Dropdown options Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdown. ```html
``` ### 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. ```html
``` ## About Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering. --- Canonical HTML page: https://adminkit.io/bootstrap/docs/components/dropdowns/ Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io