From 31d7d24b2b1c5cf3a9bb09ac079fe48295298cf9 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Wed, 26 Aug 2026 21:13:12 +0200
Subject: [PATCH] docs(dropdown): align the responsive alignment examples to
 the toggle

With responsive alignment Popper is off and the menu is placed by CSS,
relative to the dropdown itself. The default variant renders that as a
full-width block, so the examples dropped the menu against the edge of
the container instead of the button. They now set variant="btn-group",
which wraps just the toggle, and the page says why it is needed.

The first example used alignment="end" and the label of the menu
alignment example, so it never demonstrated responsive alignment at all.
The prose named an `aligment` prop that does not exist, in a syntax the
component never accepted.
---
 .../examples/DropdownResponsiveAlignment2Example.tsx        | 2 +-
 .../examples/DropdownResponsiveAlignmentExample.tsx         | 6 ++++--
 .../docs/src/content/docs/components/dropdown/index.mdx     | 6 +++---
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/docs/src/content/docs/components/dropdown/examples/DropdownResponsiveAlignment2Example.tsx b/packages/docs/src/content/docs/components/dropdown/examples/DropdownResponsiveAlignment2Example.tsx
index b0296401..f796ebf1 100644
--- a/packages/docs/src/content/docs/components/dropdown/examples/DropdownResponsiveAlignment2Example.tsx
+++ b/packages/docs/src/content/docs/components/dropdown/examples/DropdownResponsiveAlignment2Example.tsx
@@ -9,7 +9,7 @@ import {
 
 export const DropdownResponsiveAlignment2Example = () => {
   return (
-    <CDropdown alignment={{ xs: 'end', lg: 'start' }}>
+    <CDropdown alignment={{ xs: 'end', lg: 'start' }} variant="btn-group">
       <CDropdownToggle color="secondary">
         Right-aligned but left aligned when large screen
       </CDropdownToggle>
diff --git a/packages/docs/src/content/docs/components/dropdown/examples/DropdownResponsiveAlignmentExample.tsx b/packages/docs/src/content/docs/components/dropdown/examples/DropdownResponsiveAlignmentExample.tsx
index 298835a3..440577ad 100644
--- a/packages/docs/src/content/docs/components/dropdown/examples/DropdownResponsiveAlignmentExample.tsx
+++ b/packages/docs/src/content/docs/components/dropdown/examples/DropdownResponsiveAlignmentExample.tsx
@@ -9,8 +9,10 @@ import {
 
 export const DropdownResponsiveAlignmentExample = () => {
   return (
-    <CDropdown alignment="end">
-      <CDropdownToggle color="secondary">Right-aligned menu example</CDropdownToggle>
+    <CDropdown alignment={{ lg: 'end' }} variant="btn-group">
+      <CDropdownToggle color="secondary">
+        Left-aligned but right aligned when large screen
+      </CDropdownToggle>
       <CDropdownMenu>
         <CDropdownItem href="#">Action</CDropdownItem>
         <CDropdownItem href="#">Another action</CDropdownItem>
diff --git a/packages/docs/src/content/docs/components/dropdown/index.mdx b/packages/docs/src/content/docs/components/dropdown/index.mdx
index 987d9cbd..5bcb9cf8 100644
--- a/packages/docs/src/content/docs/components/dropdown/index.mdx
+++ b/packages/docs/src/content/docs/components/dropdown/index.mdx
@@ -220,15 +220,15 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
 
 ### Responsive alignment
 
-If you use responsive alignment, dynamic positioning is disabled.
+If you use responsive alignment, dynamic positioning is disabled — the classes place the menu themselves. Set `variant="btn-group"` so that the dropdown wraps just the toggle; with the default variant it is a full-width block, and the menu aligns to the edge of the container instead of the button.
 
-To align **right** the dropdown menu with the given breakpoint or larger, add `aligment="xs|sm|md|lg|xl|xxl: end"`.
+To align **right** the dropdown menu with the given breakpoint or larger, add `alignment={{ lg: 'end' }}`, replacing `lg` with any of `xs`, `sm`, `md`, `lg`, `xl`, `xxl`.
 
 <Example code={DropdownResponsiveAlignmentExampleRaw} name="DropdownResponsiveAlignmentExample" componentName="React Dropdown">
   <DropdownResponsiveAlignmentExample client:only="react" />
 </Example>
 
-To align **left** the dropdown menu with the given breakpoint or larger, add `aligment="xs|sm|md|lg|xl|xxl: start"`.
+To align **left** the dropdown menu with the given breakpoint or larger, add `alignment={{ xs: 'end', lg: 'start' }}`. Every entry of the map adds its own class, so this one is right aligned by default and left aligned from `lg` up.
 
 <Example code={DropdownResponsiveAlignment2ExampleRaw} name="DropdownResponsiveAlignment2Example" componentName="React Dropdown">
   <DropdownResponsiveAlignment2Example client:only="react" />