// The dropdown wrapper (`
`) .dropup, .dropend, .dropdown, .dropstart { position: relative; } .dropdown-toggle { white-space: nowrap; // Generate the caret automatically @include caret(); } // The dropdown menu .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: $zindex-dropdown; display: none; // none by default, but block on "open" of the menu min-width: $dropdown-min-width; padding: $dropdown-padding-y $dropdown-padding-x; margin: $dropdown-spacer 0 0; // override default ul @include font-size($dropdown-font-size); color: $dropdown-color; text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) list-style: none; background-color: $dropdown-bg; background-clip: padding-box; border: $dropdown-border-width solid $dropdown-border-color; @include border-radius($dropdown-border-radius); @include box-shadow($dropdown-box-shadow); // Reset positioning when positioned with Popper &[style] { right: auto; } } // scss-docs-start responsive-breakpoints // We deliberately hardcode the `bs-` prefix because we check // this custom property in JS to determine Popper's positioning @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); .dropdown-menu#{$infix}-start { --bs-position: start; right: auto #{"/* rtl:ignore */"}; left: 0 #{"/* rtl:ignore */"}; } .dropdown-menu#{$infix}-end { --bs-position: end; right: 0 #{"/* rtl:ignore */"}; left: auto #{"/* rtl:ignore */"}; } } } // scss-docs-end responsive-breakpoints // Allow for dropdowns to go bottom up (aka, dropup-menu) // Just add .dropup after the standard .dropdown class and you're set. .dropup { .dropdown-menu { top: auto; bottom: 100%; margin-top: 0; margin-bottom: $dropdown-spacer; } .dropdown-toggle { @include caret(up); } } .dropend { .dropdown-menu { top: 0; right: auto; left: 100%; margin-top: 0; margin-left: $dropdown-spacer; } .dropdown-toggle { @include caret(end); &::after { vertical-align: 0; } } } .dropstart { .dropdown-menu { top: 0; right: 100%; left: auto; margin-top: 0; margin-right: $dropdown-spacer; } .dropdown-toggle { @include caret(start); &::before { vertical-align: 0; } } } // Dividers (basically an `
`) within the dropdown .dropdown-divider { height: 0; margin: $dropdown-divider-margin-y 0; overflow: hidden; border-top: 1px solid $dropdown-divider-bg; } // Links, buttons, and more within the dropdown menu // // `