- ☀️Light
- 🌙Dark
- 💻System
💠 Examples
💻 HTML Code
Dropdown
📍 Positioning
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.
.left
.left-{breakpoint}.center
.center-{breakpoint}.right
.right-{breakpoint}.top
.top-{breakpoint}.bottom
.bottom-{breakpoint}.side-left
.side-left-{breakpoint}.side-right
.side-right-{breakpoint}🎨 Sizes & Colors
Dropdown buttons use the same size and color classes as regular buttons.
Refer to the Button page for all available variants.
⚙️ Variables CSS
| Variable | Description |
|---|---|
--dropdown-body-box-shadow |
Shadow applied to the dropdown body. |
--dropdown-body-min-width |
Minimum width of the dropdown body. |
--dropdown-body-spacing-margin |
Margin used to create spacing around the dropdown body. |