--- title: Dropdown summary: A dropdown is a menu that opens from a button or a link and holds options or actions, so the toolbar stays short. description: Build dropdown menus that reveal lists of options or actions. Add icons, dividers, and custom triggers to keep the interface clean. related: [/ui/components/button, /ui/components/popover] source: core/scss/ui/_dropdowns.scss classnames: component: - class: dropdown desc: Wrapper around the trigger and the menu part: - class: dropdown-toggle desc: The trigger; Bootstrap keeps aria-expanded in sync - class: dropdown-menu desc: The menu itself - class: dropdown-item desc: One entry - class: dropdown-item-icon desc: Icon at the start of an entry - class: dropdown-item-indicator desc: Marker slot, for a checkbox or a radio - class: dropdown-item-text desc: Plain text that is not an action - class: dropdown-header desc: Section label between entries - class: dropdown-divider desc: Separator line - class: dropdown-menu-columns desc: Splits a long menu into columns, holding dropdown-menu-column elements - class: dropdown-menu-card desc: Lets the menu hold card content instead of a list style: - class: dropdown-menu-arrow desc: Adds a pointer towards the trigger - class: dropdown-menu-dark desc: Dark menu - class: dropdown-toggle-split desc: Separates the caret into its own button behavior: - class: dropdown-menu-scrollable desc: Scrolls a long menu instead of growing it direction: - class: dropdown-menu-end desc: Aligns the menu to the trailing edge; -{breakpoint}- variants apply above a width - class: dropend desc: Opens a nested menu to the side, for a submenu --- import Example from '@components/Example.astro'; import CodeDocs from '@components/CodeDocs.astro'; ## Default dropdown Any `.btn` becomes a dropdown toggle with `data-bs-toggle="dropdown"` and a `.dropdown-menu` next to it. The classes below add dividers, headers, icons and other details to the menu. ## Dropdown divider A `.dropdown-divider` separates groups of items. ## Active state The `active` class marks the current item. ## Disabled state The `disabled` class shows an item that isn't available right now. ## Dropdown header A `.dropdown-header` names a group of items. ## Dropdown with icons An [icon](/ui/components/icon) in front of each item makes the options faster to scan. ## Dropdown with arrow Add an arrow that points at the dropdown button. ## Dropdown with badge A [badge](/ui/components/badge) in an item shows a count or a status next to it. ## Dropdown with checkboxes Items can hold [checkboxes](/ui/forms/elements), which makes a dropdown work as a filter. ## Dark dropdown Add `dropdown-menu-dark` to the menu for a dark menu on a light page. ## Dropdown with card content A menu can hold [card](/ui/components/card) content, such as a short profile or a summary, when a plain list isn't enough. ## Multi-column menu A long menu can be split into columns instead of scrolling. Wrap the items in `dropdown-menu-columns`, then group them into `dropdown-menu-column` elements - one per column. ## Submenu Nest a dropdown inside a menu item and add `dropend` to open the child menu to the side instead of below. ## JavaScript Tabler automatically initializes all elements with `data-bs-toggle="dropdown"` on page load. This is the code that runs: ## Accessibility - The trigger must be a `button`, or an `a` with an `href`. Bootstrap toggles `aria-expanded` on it for you, so do not set it by hand. - Bootstrap moves focus into the menu and supports the arrow keys, Home, End and Escape. That only works while the items are `.dropdown-item` elements inside `.dropdown-menu`. - An icon-only trigger needs an `aria-label`. The caret is decorative and carries no name. - A dropdown used as a menu of actions should hold `button` items; one used for navigation should hold links. Mixing them makes the keyboard behavior inconsistent. - Use `.dropdown-header` for a group title and `.dropdown-divider` for a separator, rather than styling a plain item to look like one. ## SCSS variables Use these SCSS variables to customize dropdowns. The default values are:

How do you know she is a witch?