Dropdown Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
Enable Component
Enable the dropdown component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                dropdown: true // Enable dropdown component
            }
        }
    }
}
Basic Usage
Explore more examples from the previewer tab
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-reference="parent">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>
  </ul>
</div>
NameDescription
.dropdownApplies to the wrapper element for dropdown direction
.dropupApplies to the wrapper element for dropup direction
.dropendApplies to the wrapper element for dropend direction
.dropstartApplies to the wrapper element for dropstart direction
.drop{direction} > .dropdown-toggleApplies to the button that toggles the dropdown, this class adds the dropdown arrow
.drop{direction} > .dropdown-menuApplies to the wrapper element of the actual content that drops down
.drop{direction} > .dropdown-menu > .dropdown-itemApplies to menu item (<a>) element within the dropdown menu
.drop{direction} > .dropdown-menu > .dropdown-item.activeMakes a dropdown menu item active
.drop{direction} > .dropdown-menu > .dropdown-item.disabledMakes a drop down menu item disabled
.drop{direction} > .dropdown-menu > .dropdown-headerApplies to heading elements within the dropdown menu
.drop{direction} > .dropdown-menu > .dropdown-dividerAdds a divider within the dropdown menu between menu items
Customize variables at:/library/extend/components/_dropdown.scss
Component's defaults:/library/components/dropdown/_defaults.scss
NameDefault valueNote
$dropdown-min-width10rem
$dropdown-padding-x0
$dropdown-padding-y.5rem
$dropdown-spacer.125rem
$dropdown-font-size$font-size-base
$dropdown-colorproperty.get(popover-text-color)Requires @use "@library/sass/modules/property";
$dropdown-bgproperty.get(popover-bg)Requires @use "@library/sass/modules/property";
$dropdown-border-colorproperty.get(popover-border-color)Requires @use "@library/sass/modules/property";
$dropdown-border-radius4px
$dropdown-border-width$border-width
$dropdown-inner-border-radiussubtract($dropdown-border-radius, $dropdown-border-width)
$dropdown-divider-bgproperty.get(popover-divider)Requires @use "@library/sass/modules/property";
$dropdown-divider-margin-y$spacer / 2
$dropdown-box-shadowproperty.get(popover-shadow)Requires @use "@library/sass/modules/property";
$dropdown-link-colorproperty.get(menu-item-text-color)Requires @use "@library/sass/modules/property";
$dropdown-link-hover-colorproperty.get(menu-item-hover-text-color)Requires @use "@library/sass/modules/property";
$dropdown-link-hover-bgproperty.get(menu-item-hover-bg)Requires @use "@library/sass/modules/property";
$dropdown-link-active-colorproperty.get(menu-item-active-text-color)Requires @use "@library/sass/modules/property";
$dropdown-link-active-bgproperty.get(menu-item-active-bg)Requires @use "@library/sass/modules/property";
$dropdown-link-disabled-colorproperty.get(menu-item-disabled-color)Requires @use "@library/sass/modules/property";
$dropdown-item-border-radius4px
$dropdown-item-margin-y0
$dropdown-item-margin-x8px
$dropdown-item-padding-y.344rem
$dropdown-item-padding-x12px
$dropdown-item-lg-margin-y0
$dropdown-item-lg-margin-x8px
$dropdown-item-lg-padding-y.594rem
$dropdown-item-lg-padding-x16px
$dropdown-item-sm-margin-y0
$dropdown-item-sm-margin-x8px
$dropdown-item-sm-padding-y.188rem
$dropdown-item-sm-padding-x8px
$dropdown-header-colorproperty.get(text-muted)Requires @use "@library/sass/modules/property";
$dropdown-header-padding$dropdown-padding-y $dropdown-item-padding-x
$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-shadownull
$dropdown-dark-link-color$dropdown-dark-color
$dropdown-dark-link-hover-color$white
$dropdown-dark-link-hover-bgrgba($white, .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
$dropdown-arrow-size18;
$dropdown-arrow-colorred;

Make sure to read the Customize components and Understanding and using the design system guides.

{title}