Add data-js="dropdown" to the button and set data-target to the menu ID. The script opens or closes the dropdown and updates aria-expanded automatically.

Add position classes directly on the .dropdown-menu to control where it appears. If no position class is added, the menu defaults to .bottom and .left. You can also use breakpoint‑based classes to change the dropdown position depending on the screen size.

Dropdown buttons use the same size and color classes as regular buttons. Refer to the Button page for all available variants.

For accessibility, set aria-expanded on the button only once to match the initial state. After that, the script updates its value automatically when the dropdown opens or closes.

Add aria-controls to link the button to the menu ID. This helps assistive technologies understand which element is being toggled.