Add rudimentary nested dropdowns

scss/_dropdown.scss

@@ -17,7 +17,8 @@
 .dropdown-menu {
   // scss-docs-start dropdown-css-vars
   --#{$variable-prefix}dropdown-min-width: #{$dropdown-min-width};
-  --#{$variable-prefix}dropdown-padding: #{$dropdown-padding-y $dropdown-padding-x};
+  --#{$variable-prefix}dropdown-padding-x: #{$dropdown-padding-x};
+  --#{$variable-prefix}dropdown-padding-y: #{$dropdown-padding-y};
   --#{$variable-prefix}dropdown-spacer: #{$dropdown-spacer};
   @include rfs($dropdown-font-size, --#{$variable-prefix}dropdown-font-size);
   --#{$variable-prefix}dropdown-color: #{$dropdown-color}; // stylelint-disable-line custom-property-empty-line-before
@@ -35,7 +36,8 @@
   --#{$variable-prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
   --#{$variable-prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
   --#{$variable-prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
-  --#{$variable-prefix}dropdown-item-padding: #{$dropdown-item-padding-y $dropdown-item-padding-x};
+  --#{$variable-prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
+  --#{$variable-prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
   --#{$variable-prefix}dropdown-header-color: #{$dropdown-header-color};
   --#{$variable-prefix}dropdown-header-padding: #{$dropdown-header-padding};
   // scss-docs-end dropdown-css-vars
@@ -44,7 +46,7 @@
   z-index: $zindex-dropdown;
   display: none; // none by default, but block on "open" of the menu
   min-width: var(--#{$variable-prefix}dropdown-min-width);
-  padding: var(--#{$variable-prefix}dropdown-padding);
+  padding: var(--#{$variable-prefix}dropdown-padding-y) var(--#{$variable-prefix}dropdown-padding-x);
   margin: 0; // Override default margin of ul
   @include font-size($dropdown-font-size);
   color: var(--#{$variable-prefix}dropdown-color);
@@ -61,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
@@ -156,7 +177,7 @@
 .dropdown-item {
   display: block;
   width: 100%; // For `<button>`s
-  padding: var(--#{$variable-prefix}dropdown-item-padding);
+  padding: var(--#{$variable-prefix}dropdown-item-padding-y) var(--#{$variable-prefix}dropdown-item-padding-x);
   clear: both;
   font-weight: $font-weight-normal;
   color: var(--#{$variable-prefix}dropdown-link-color);

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

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