Bootstrap components

Dropdowns

A menu of actions or links that opens from a button, for the options that do not need to be always in view.

A dropdown hides a short list of related actions behind one button. Use it for secondary actions of a row or a page, and for choosing one of a few related things.

When to use it

Use it

Keep the menu short (up to about 8 items) and group related items with a header or a divider.
An icon before the text when the action has one in the icon table.
Put the destructive action last, separated and in danger.
Align the menu to the end (dropdown-menu-end) when the button is at the edge.

Don't

Hide the main action of a page in a menu.
Nest menus inside menus.
Use a dropdown for navigation that people use all the time; use tabs or a navbar.
Put a form inside a menu.

Anatomy

A toggle (a button with dropdown-toggle, or an icon button) and a menu (dropdown-menu) with items (dropdown-item), optional headers (dropdown-header) and dividers. The menu opens under the toggle.

Variants and states

Open it

Items and states

Combinations

Combination	Use it for
Button × menu	Secondary actions of a page: a labelled button (“Actions”) with a caret.
Icon button × menu	Actions of a row: a square icon button (`btn-icon`) with `dropdown-menu-end`.
Split button	The most likely action on the main part (Save) and the others in the menu.
Items × groups	Group with a header and a divider; the destructive item goes last, separated, in danger.

What Didactika changes and why

What we changed	Why it helps
The menu has room, a soft shadow and rounded items	It reads as something that floats over the page, and every item is a target you can hit without aiming.
The selected item is tinted and semi-bold, not filled	A filled bar looks like an error or a button; a tint says “this one” quietly.
The focus ring is drawn inside the item	It never covers its neighbour, so an item with focus and the selected one can be told apart.
The menu opens with a short fade and slide	The eye follows where it came from; it is quick enough never to be waited for.

Classes

Class	What it does
`dropdown`	Wraps the toggle and the menu
`dropdown-toggle`	The button with the caret
`dropdown-menu`	The list that opens
`dropdown-item`	An action; `active`, `disabled`
`dropdown-header`, `dropdown-divider`	Group titles and separators
`dropdown-menu-enddropdown-menu-right`	Aligns the menu to the end of the toggle

In this version

Bootstrap 5.3 keeps its colours in CSS variables (--bs-*), so a theme recolours the component with one variable. The items are written inside a list (ul/li).

Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet. The items are a elements directly inside the menu.

Accessibility

The toggle has aria-expanded and, when it is only an icon, aria-label.
Arrow keys move between items, Escape closes and returns focus to the toggle.
Items are links or buttons, never plain text.
A disabled item has aria-disabled="true" and tabindex="-1".