Add rudimentary nested dropdowns
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 9a1ab1d..accb3e4 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss
@@ -63,6 +63,25 @@ left: 0; margin-top: var(--#{$variable-prefix}dropdown-spacer); } + + .dropdown > .dropdown-item { + background-image: escape-svg($dropdown-nested-bg); + background-repeat: no-repeat; + background-position: $dropdown-nested-bg-position; + background-size: $dropdown-nested-bg-size; + + &:active { + background-image: escape-svg($dropdown-nested-active-bg); + } + } + + .dropdown .dropdown-menu:hover, + .dropdown > .dropdown-item:hover ~ .dropdown-menu { + position: absolute; + top: 0; + left: calc(100% - .25rem); // stylelint-disable-line function-disallowed-list + display: block; + } // scss-docs-start responsive-breakpoints
diff --git a/scss/_variables.scss b/scss/_variables.scss index fd6166b..ab580f4 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss
@@ -1149,6 +1149,11 @@ $dropdown-header-color: $gray-600 !default; $dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default; + +$dropdown-nested-bg: url("data:image/svg+xml,<svg viewBox='0 0 7 12' xmlns='http://www.w3.org/2000/svg'><path d='m1 1 5 5-5 5' stroke='#{$dropdown-link-color}' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/></svg>") !default; +$dropdown-nested-active-bg: url("data:image/svg+xml,<svg viewBox='0 0 7 12' xmlns='http://www.w3.org/2000/svg'><path d='m1 1 5 5-5 5' stroke='#{$dropdown-link-active-color}' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/></svg>") !default; +$dropdown-nested-bg-position: right $dropdown-item-padding-x center !default; +$dropdown-nested-bg-size: 7px 12px !default; // scss-docs-end dropdown-variables // scss-docs-start dropdown-dark-variables
diff --git a/site/content/docs/5.1/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md index c98dd77..59221b4 100644 --- a/site/content/docs/5.1/components/dropdowns.md +++ b/site/content/docs/5.1/components/dropdowns.md
@@ -393,6 +393,30 @@ </nav> {{< /example >}} +## Nesting + +{{< example >}} +<div class="dropdown"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownNestedBtn" data-bs-toggle="dropdown" aria-expanded="false"> + Nested dropdown + </button> + <ul class="dropdown-menu" aria-labelledby="dropdownNestedBtn"> + <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 class="dropdown"> + <a class="dropdown-item" href="#" aria-labelledby="dropdownNested1">Nested dropdown</a> + <ul class="dropdown-menu" aria-labelledby="dropdownNested1"> + <li><a class="dropdown-item" href="#">Nested item</a></li> + <li><a class="dropdown-item" href="#">Nested item 2</a></li> + <li><a class="dropdown-item" href="#">Nested item 3</a></li> + </ul> + </li> + </ul> +</div> +{{< /example >}} + ## Directions {{< callout info >}}