diff --git a/docs/components_page/components/dropdown/__init__.py b/docs/components_page/components/dropdown/__init__.py
index 4e0e717e3..23157d45f 100644
--- a/docs/components_page/components/dropdown/__init__.py
+++ b/docs/components_page/components/dropdown/__init__.py
@@ -5,6 +5,7 @@
from ...api_doc import ApiDoc
from ...helpers import ExampleContainer, HighlightedSource
from ...metadata import get_component_metadata
+from .alignment import dropdown as dropdown_alignment
from .direction import dropdown as dropdown_direction
from .simple import dropdown as dropdown_simple
from .size import dropdown as dropdown_size
@@ -14,6 +15,7 @@
dropdown_simple_source = (HERE / "simple.py").read_text()
dropdown_size_source = (HERE / "size.py").read_text()
dropdown_direction_source = (HERE / "direction.py").read_text()
+dropdown_alignment_source = (HERE / "alignment.py").read_text()
content = [
html.H2("DropdownMenu"),
@@ -25,6 +27,9 @@
html.H4("DropdownMenu direction"),
ExampleContainer(dropdown_direction),
HighlightedSource(dropdown_direction_source),
+ html.H4("DropdownMenu alignment"),
+ ExampleContainer(dropdown_alignment),
+ HighlightedSource(dropdown_alignment_source),
ApiDoc(
get_component_metadata("src/components/DropdownMenu.js"),
component_name="DropdownMenu",
diff --git a/docs/components_page/components/dropdown/alignment.py b/docs/components_page/components/dropdown/alignment.py
new file mode 100644
index 000000000..819eb6b0c
--- /dev/null
+++ b/docs/components_page/components/dropdown/alignment.py
@@ -0,0 +1,26 @@
+import dash_bootstrap_components as dbc
+
+items = [
+ dbc.DropdownMenuItem("Action"),
+ dbc.DropdownMenuItem("Another action"),
+ dbc.DropdownMenuItem("Something else here"),
+ dbc.DropdownMenuItem(divider=True),
+ dbc.DropdownMenuItem("Something else here after the divider"),
+]
+
+dropdown = dbc.Row(
+ [
+ dbc.Col(
+ dbc.DropdownMenu(
+ label="Left-aligned menu (default)",
+ children=items,
+ right=False,
+ )
+ ),
+ dbc.Col(
+ dbc.DropdownMenu(
+ label="Right-aligned menu", children=items, right=True
+ )
+ ),
+ ]
+)
diff --git a/src/components/DropdownMenu.js b/src/components/DropdownMenu.js
index f3e372f52..c37f13d87 100644
--- a/src/components/DropdownMenu.js
+++ b/src/components/DropdownMenu.js
@@ -31,6 +31,7 @@ class DropdownMenu extends React.Component {
in_navbar,
addon_type,
bs_size,
+ right,
loading_state,
...otherProps
} = this.props;
@@ -51,7 +52,7 @@ class DropdownMenu extends React.Component {
{label}
- {this.props.children}
+ {this.props.children}
);
}
@@ -103,6 +104,11 @@ DropdownMenu.propTypes = {
*/
direction: PropTypes.oneOf(['down', 'left', 'right']),
+ /**
+ * Align the DropdownMenu along the right side of its parent. Default: False.
+ */
+ right: PropTypes.bool,
+
/**
* Set this to True if the DropdownMenu is inside a navbar. Default: False.
*/