From e12dddc50e5cd75df225c9e3221861e1edc08066 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 23 Feb 2022 14:04:38 -0800
Subject: [PATCH] Add rudimentary nested dropdowns

---
 scss/_dropdown.scss                           | 19 +++++++++++++++
 scss/_variables.scss                          |  5 ++++
 site/content/docs/5.1/components/dropdowns.md | 24 +++++++++++++++++++
 3 files changed, 48 insertions(+)

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 9a1ab1dba8..accb3e4fec 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 fd6166b26c..ab580f4562 100644
--- 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 c98dd778e0..59221b4aa1 100644
--- 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 >}}