Dropdowns
Bootstrap 5 Dropdown component
Responsive dropdown/caret built with Bootstrap 5. Examples of navbar dropdown, dropdown list, submenu, dropdown toggle, dropdown hover, hamburger icon & more.
Dropdowns are responsible for toggleable (collapsible) display a list of links.
Toggle contextual overlays for displaying lists of links and more with the MDB dropdown plugin.
Note: Read the API tab to find all available options and advanced customization
*
*
UMD autoinits are enabled
by default. This means that you don't need to initialize
the component manually. However if you are using MDBootstrap ES format then you should pass
the required components to the initMDB
method.
Basic examples
Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
.dropdown
element that declares position: relative;
. Dropdowns can be
triggered from <a>
or <button>
elements to better fit
your potential needs. The examples shown here use semantic <ul>
elements
where appropriate, but custom markup is supported.
Colors
You can do this with any button variant:
<!-- Primary -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-mdb-dropdown-init data-mdb-ripple-init aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Secondary -->
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-mdb-dropdown-init data-mdb-ripple-init aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Success -->
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-mdb-dropdown-init data-mdb-ripple-init aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Info -->
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-mdb-dropdown-init data-mdb-ripple-init aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Warning -->
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-mdb-dropdown-init data-mdb-ripple-init aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Danger -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-mdb-dropdown-init data-mdb-ripple-init aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Dark -->
<div class="btn-group">
<button type="button" class="btn btn-dark dropdown-toggle" data-mdb-dropdown-init data-mdb-ripple-init aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Light -->
<div class="btn-group shadow-0">
<button type="button" class="btn btn-light dropdown-toggle" data-mdb-dropdown-init data-mdb-ripple-init aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Link -->
<div class="btn-group shadow-0">
<button type="button" class="btn btn-link dropdown-toggle" data-mdb-dropdown-init data-mdb-ripple-init aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
// Initialization for ES Users
import { Dropdown, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Dropdown, Ripple });
Sizing
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
<!-- Large button groups (default and split) -->
<div class="btn-group">
<button
class="btn btn-primary btn-lg dropdown-toggle"
type="button"
data-mdb-dropdown-init
data-mdb-ripple-init
aria-expanded="false"
>
Large button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary btn-lg" type="button">Large split button</button>
<button
type="button"
class="btn btn-lg btn-primary dropdown-toggle dropdown-toggle-split"
data-mdb-dropdown-init
data-mdb-ripple-init
aria-expanded="false"
>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Small button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-mdb-dropdown-init data-mdb-ripple-init aria-expanded="false">
Small button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary btn-sm" type="button">Small split button</button>
<button
type="button"
class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split"
data-mdb-dropdown-init
data-mdb-ripple-init
aria-expanded="false"
>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
// Initialization for ES Users
import { Dropdown, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Dropdown, Ripple });
Directions
Dropup
Trigger dropdown menus above elements by adding .dropup
to the parent element.
<!-- Default dropup button -->
<div class="btn-group dropup">
<button
type="button"
class="btn btn-primary dropdown-toggle"
data-mdb-dropdown-init
data-mdb-ripple-init aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Split dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-primary">Split dropup</button>
<button
type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-mdb-dropdown-init
data-mdb-ripple-init
aria-expanded="false"
>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
// Initialization for ES Users
import { Dropdown, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Dropdown, Ripple });
Dropright
Trigger dropdown menus at the right of the elements by adding
.dropend
to the parent element.
<!-- Default dropright button -->
<div class="btn-group dropend">
<button
type="button" class="btn btn-primary dropdown-toggle"
data-mdb-dropdown-init
data-mdb-ripple-init aria-expanded="false">
Dropright
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Split dropright button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-primary">Split dropright</button>
<button
type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-mdb-dropdown-init
data-mdb-ripple-init
aria-expanded="false"
>
<span class="visually-hidden">Toggle Dropright</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
// Initialization for ES Users
import { Dropdown, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Dropdown, Ripple });
Dropleft
Trigger dropdown menus at the left of the elements by adding
.dropstart
to the parent element.
<!-- Default dropleft button -->
<div class="btn-group dropstart">
<button
type="button"
class="btn btn-primary dropdown-toggle"
data-mdb-dropdown-init
data-mdb-ripple-init aria-expanded="false">
Dropleft
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Split dropleft button -->
<div class="btn-group">
<div class="btn-group dropstart" role="group">
<button
type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-mdb-dropdown-init
data-mdb-ripple-init
aria-expanded="false"
>
<span class="visually-hidden">Toggle Dropleft</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<button type="button" class="btn btn-primary">Split dropleft</button>
</div>
// Initialization for ES Users
import { Dropdown, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Dropdown, Ripple });
Remove animation
To remove the fade animation on click, add
data-mdb-dropdown-animation="off"
attribute to the dropdown button.
<div class="dropdown">
<button
class="btn btn-primary dropdown-toggle"
type="button"
id="dropdownExampleAnimation"
data-mdb-dropdown-init
data-mdb-ripple-init
aria-expanded="false"
data-mdb-dropdown-animation="off"
>
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownExampleAnimation">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
// Initialization for ES Users
import { Dropdown, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Dropdown, Ripple });
Dropdown options
Use data-mdb-offset
or data-mdb-reference
to change the location of
the dropdown.
<div class="d-flex">
<div class="dropdown me-1">
<button
type="button"
class="btn btn-primary dropdown-toggle"
id="dropdownMenuOffset"
data-mdb-dropdown-init
data-mdb-ripple-init
aria-expanded="false"
data-mdb-offset="10,20"
>
Offset
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Reference</button>
<button
type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
id="dropdownMenuReference"
data-mdb-dropdown-init
data-mdb-ripple-init
aria-expanded="false"
data-mdb-reference="parent"
>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
// Initialization for ES Users
import { Dropdown, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Dropdown, Ripple });
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.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle"
type="button"
data-mdb-dropdown-init
data-mdb-ripple-init
data-mdb-auto-close="true"
aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle"
type="button"
data-mdb-dropdown-init
data-mdb-ripple-init
data-mdb-auto-close="outside"
aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle"
type="button"
data-mdb-dropdown-init
data-mdb-ripple-init
data-mdb-auto-close="inside"
aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle"
type="button"
data-mdb-dropdown-init
data-mdb-ripple-init
data-mdb-auto-close="false"
aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
// Initialization for ES Users
import { Dropdown, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Dropdown, Ripple });
Dropdowns - API
Import
Importing components depends on how your application works. If you intend to use the MDBootstrap ES
format, you must
first import the component and then initialize it with the initMDB
method. If you are going to use the UMD
format,
just import the mdb-ui-kit
package.
import { Dropdown, initMDB } from "mdb-ui-kit";
initMDB({ Dropdown });
import "mdb-ui-kit"
Usage
Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus)
by toggling the .show
class on the parent list item.
Note:
On touch-enabled devices, opening a dropdown adds empty
mouseover
handlers to the immediate children of the
<body>
element. This admittedly ugly hack is necessary to work around a
quirk in iOS’ event delegation, which would otherwise prevent a tap anywhere outside of the dropdown from triggering the
code that closes the dropdown. Once the dropdown is closed, these additional empty
mouseover
handlers are removed.
Via data attributes
Using the Dropdown component doesn't require any additional JavaScript code - simply add
data-mdb-dropdown-init
attribute to
.dropdown-toggle
and use other data attributes to set all options.
For ES
format, you must first import and call the initMDB
method.
<div class="dropdown">
<button id="dLabel" type="button" data-mdb-dropdown-init data-mdb-ripple-init aria-expanded="false">
Dropdown trigger
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>
Via JavaScript
const element = document.querySelector('.dropdown-toggle');
const instance = new Dropdown(element);
const element = document.querySelector('.dropdown-toggle');
const instance = new mdb.Dropdown(element);
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
data-mdb-
, as in data-mdb-dropdown-animation="on"
.
Name | Type | Default | Description |
---|---|---|---|
autoClose |
boolean | string | true |
Configure the auto close behavior of the dropdown:
|
boundary |
string | element | 'clippingParents' |
Overflow constraint boundary of the dropdown menu (applies only to Popper's
preventOverflow modifier). By default it's
'clippingParents' and can accept an HTMLElement reference (via JavaScript
only). For more information refer to Popper's
detectOverflow docs.
|
display |
string | 'dynamic' |
By default, we use Popper for dynamic positioning. Disable this with
static .
|
dropdownAnimation |
string | 'on' |
Turn on / off dropdown animation. |
offset |
array | string | function | [0, 2] |
Offset of the dropdown relative to its target. When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument. For more information refer to Popper's offset docs. |
popperConfig |
null | object | function | null |
To change Bootstrap's default Popper config, see Popper's configuration. When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |
reference |
string | element | object | 'toggle' |
Reference element of the dropdown menu. Accepts the values of 'toggle' ,
'parent' , an HTMLElement reference or an object providing
getBoundingClientRect . For more information refer to Popper's
constructor docs
and virtual element docs.
|
Note when boundary
is set to any value other than 'scrollParent'
,
the style position: static
is applied to the .dropdown
container.
Methods
Method | Description | Example |
---|---|---|
toggle |
Toggles the dropdown menu of a given navbar or tabbed navigation. | myDropdown.toggle() |
show |
Shows the dropdown menu of a given navbar or tabbed navigation. | myDropdown.show() |
hide |
Hides the dropdown menu of a given navbar or tabbed navigation. | myDropdown.hide() |
update |
Updates the position of an element's dropdown by recomputing dropdown position and updates it if needed. | myDropdown.update() |
dispose |
Destroys an element's dropdown. | myDropdown.dispose() |
getInstance |
Static method which allows you to get the dropdown instance associated with a DOM element. | Dropdown.getInstance() |
getOrCreateInstance |
Static method which allows you to get the dropdown instance associated with a DOM element or create a new one in case it wasn't initialized. | Dropdown.getOrCreateInstance() |
const myDropdown = document.getElementById('myDropdown');
const myDropdownInstance = new Dropdown(myDropdown);
myDropdownInstance.show();
const myDropdown = document.getElementById('myDropdown');
const myDropdownInstance = new mdb.Dropdown(myDropdown);
myDropdownInstance.show();
Events
All dropdown events are fired at the toggling element and then bubbled up. So you can also add
event listeners on the .dropdown-menu
’s parent element.
hide.mdb.dropdown
and hidden.mdb.dropdown
events have a
clickEvent
property (only when the original Event type is click
)
that contains an Event Object for the click event.
Method | Description |
---|---|
show.mdb.dropdown
|
Fires immediately when the show instance method is called. |
shown.mdb.dropdown
|
Fired when the dropdown has been made visible to the user and CSS transitions have completed. |
hide.mdb.dropdown
|
Fires immediately when the hide instance method has been called. |
hidden.mdb.dropdown
|
Fired when the dropdown has finished being hidden from the user and CSS transitions have completed. |
const myDropdown = document.getElementById('myDropdown');
myDropdown.addEventListener('show.mdb.dropdown', () => {
// do something...
});
CSS variables
As part of MDB’s evolving CSS variables approach, dropdown now uses local CSS variables on
.dropdown-menu
, .dropdown-item
and
.dropdown-divider
for enhanced real-time customization. Values for the CSS
variables are set via Sass, so Sass customization is still supported, too.
// .dropdown-menu
--#{$prefix}dropdown-zindex: #{$zindex-dropdown};
--#{$prefix}dropdown-min-width: #{$dropdown-min-width};
--#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
--#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
--#{$prefix}dropdown-spacer: #{$dropdown-spacer};
@include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
--#{$prefix}dropdown-color: #{$dropdown-color};
--#{$prefix}dropdown-bg: #{$dropdown-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-border-color};
--#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
--#{$prefix}dropdown-border-width: #{$dropdown-border-width};
--#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
--#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
--#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
--#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
--#{$prefix}dropdown-link-color: #{$dropdown-link-color};
--#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
--#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
--#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
--#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
--#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
--#{$prefix}dropdown-header-color: #{$dropdown-header-color};
--#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
--#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
--#{$prefix}dropdown-item-border-radius: #{$dropdown-item-border-radius};
--#{$prefix}dropdown-menu-animated-animation-duration: #{$dropdown-menu-animated-animation-duration};
--#{$prefix}dropdown-menu-animated-animation-timing-function: #{$dropdown-menu-animated-animation-timing-function};
// .dropdown-item
--#{$prefix}dropdown-state-color: #{$dropdown-state-color};
--#{$prefix}dropdown-state-background-color: #{$dropdown-state-background-color};
// .dropdown-divider
--#{$prefix}dropdown-divider-border-top-width: #{$dropdown-divider-border-top-width};
--#{$prefix}dropdown-divider-border-top-bg: #{$dropdown-divider-bg};
// .dropdown-menu-dark
--#{$prefix}dropdown-color: #{$dropdown-dark-color};
--#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
--#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
--#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
--#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
--#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
--#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
--#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
--#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
SCSS variables
$zindex-dropdown: 1000;
$dropdown-min-width: 10rem;
$dropdown-color: var(--#{$prefix}surface-color);
$dropdown-padding-x: 0;
$dropdown-padding-y: 0.5rem;
$dropdown-margin-top: 0.125rem;
$dropdown-box-shadow: $box-shadow-4;
$dropdown-font-size: 0.875rem;
$dropdown-item-border-radius: 0.5rem;
$dropdown-item-padding-y: 0.5rem;
$dropdown-item-padding-x: 1rem;
$dropdown-border-radius: 0.5rem;
$dropdown-divider-bg: var(--#{$prefix}divider-color);
$dropdown-divider-border-top-width: 2px;
$dropdown-divider-margin-y: $spacer * 0.5;
$dropdown-state-color: var(--#{$prefix}surface-color);
$dropdown-state-background-color: var(--#{$prefix}highlight-bg-color);
$dropdown-menu-animated-animation-duration: 0.55s;
$dropdown-menu-animated-animation-timing-function: ease;
$dropdown-animation-duration: 1s;
$dropdown-spacer: 0.125rem;
$dropdown-bg: var(--#{$prefix}surface-bg);
$dropdown-border-color: var(--#{$prefix}border-color-translucent);
$dropdown-border-width: var(--#{$prefix}border-width);
$dropdown-inner-border-radius: calc(
#{$dropdown-border-radius} - #{$dropdown-border-width}
)
$dropdown-link-color: $dropdown-color;
$dropdown-link-hover-color: $dropdown-link-color;
$dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg);
$dropdown-link-active-color: $component-active-color;
$dropdown-link-active-bg: $component-active-bg;
$dropdown-link-disabled-color: var(--#{$prefix}tertiary-color);
$dropdown-header-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.55);
$dropdown-header-padding-x: $dropdown-item-padding-x;
$dropdown-header-padding-y: $dropdown-padding-y;
$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x;
// dark
$dropdown-dark-color: $gray-300;
$dropdown-dark-bg: $gray-800;
$dropdown-dark-border-color: $dropdown-border-color;
$dropdown-dark-divider-bg: $dropdown-divider-bg;
$dropdown-dark-box-shadow: null;
$dropdown-dark-link-color: $dropdown-dark-color;
$dropdown-dark-link-hover-color: $white;
$dropdown-dark-link-hover-bg: rgba($white, 0.15);
$dropdown-dark-link-active-color: $dropdown-link-active-color;
$dropdown-dark-link-active-bg: $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color: $gray-500;