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 >}}
