Convert dropdowns to CSS variables

2 files changed, 17 insertions, 5 deletions

diff --git a/site/content/docs/5.1/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md
index f5dcff4ccd..c98dd778e0 100644
--- a/site/content/docs/5.1/components/dropdowns.md
+++ b/site/content/docs/5.1/components/dropdowns.md
@@ -953,10 +953,22 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
 </div>
 {{< /example >}}
 
-## Sass
+## CSS
 
 ### Variables
 
+<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+
+As part of Bootstrap's evolving CSS variables approach, dropdowns now use local CSS variables on `.dropdown-menu` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="dropdown-css-vars" file="scss/_dropdown.scss" >}}
+
+Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors.
+
+{{< scss-docs name="dropdown-dark-css-vars" file="scss/_dropdown.scss" >}}
+
+### Sass variables
+
 Variables for all dropdowns:
 
 {{< scss-docs name="dropdown-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.1/examples/dropdowns/index.html b/site/content/docs/5.1/examples/dropdowns/index.html
index 861e816670..518adb568d 100644
--- a/site/content/docs/5.1/examples/dropdowns/index.html
+++ b/site/content/docs/5.1/examples/dropdowns/index.html
@@ -80,7 +80,7 @@ body_class: ""
   </symbol>
 </svg>
 
-<div class="d-flex gap-5 justify-content-center" id="dropdownMacos">
+<div class="d-flex gap-5 justify-content-center dropdown" id="dropdownMacos">
   <ul class="dropdown-menu dropdown-menu-macos mx-0 shadow" style="width: 220px;">
     <li><a class="dropdown-item active" href="#">Action</a></li>
     <li><a class="dropdown-item" href="#">Another action</a></li>
@@ -100,7 +100,7 @@ body_class: ""
 <div class="b-example-divider"></div>
 
 
-<div class="d-flex gap-5 justify-content-center" id="dropdownFilter">
+<div class="d-flex gap-5 justify-content-center dropdown" id="dropdownFilter">
   <div class="dropdown-menu pt-0 mx-0 rounded-3 shadow overflow-hidden" style="width: 280px;">
     <form class="p-2 mb-2 bg-light border-bottom">
       <input type="search" class="form-control" autocomplete="false" placeholder="Type to filter...">
@@ -152,7 +152,7 @@ body_class: ""
 
 <div class="b-example-divider"></div>
 
-<div class="d-flex gap-5 justify-content-center" id="dropdownIcons">
+<div class="d-flex gap-5 justify-content-center dropdown" id="dropdownIcons">
   <ul class="dropdown-menu mx-0 shadow" style="width: 220px;">
     <li>
       <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
@@ -316,7 +316,7 @@ body_class: ""
 
 <div class="b-example-divider"></div>
 
-<div class="dropdown-menu d-flex align-items-stretch p-3 rounded-3 shadow-lg" style="width: 600px" id="dropdownMega">
+<div class="dropdown-menu d-flex align-items-stretch p-3 rounded-3 shadow-lg dropdown" style="width: 600px" id="dropdownMega">
   <nav class="d-grid gap-2 col-8">
     <a href="#" class="btn btn-hover-light d-flex align-items-center gap-3 py-2 px-3 lh-sm">
       <svg class="bi" width="32" height="32"><use xlink:href="#image-fill"/></svg>