Add rudimentary nested dropdowns

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 9a1ab1dba89b82322991a8c9e848b16e34e553e0..accb3e4fecab3978297a6b10833ec771d80c3c96 100644 (file)
--- 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 fd6166b26c945ce7ed94bc6b5366884051456996..ab580f45629f760534afd4a2eb8b2260aac1f587 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1149,6 +1149,11 @@ $dropdown-item-padding-x:           $spacer !default;
 
 $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 c98dd778e0602dfe6501b41a8300c51370e8fd5b..59221b4aa1d35164a1a95675646ce3bccea33b1a 100644 (file)
--- a/site/content/docs/5.1/components/dropdowns.md
+++ b/site/content/docs/5.1/components/dropdowns.md
@@ -393,6 +393,30 @@ And putting it to use in a navbar:
 </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 >}}