- An array of objects representing the options. Each object has the following properties:
-
-
- label: Option display value.
-
-
- icon:{" "}
-
- Material Symbol
- {" "}
- name or SVG element as the icon that will be placed next to the option label. When using Material
- Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled
- prefix the symbol name with "filled_".
-
-
- value: Option inner value.
-
-
+ boolean
+
+
If true, the component will be disabled.
+
+ false
-
-
-
optionsIconPosition
+
expandOnHover
- 'before' | 'after'
+ boolean
-
In case options include icons, whether the icon should appear after or before the label.
+
If true, the options are shown when the dropdown is hovered.
Whether the arrow next to the label must be displayed or not.
- false
+ Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left'
+ and 'right' properties in order to specify different margin sizes.
+
-
-
disabled
-
- boolean
-
-
If true, the component will be disabled.
- false
+
+
+ onSelectOption
+
-
-
-
expandOnHover
- boolean
+ {"(value: string) => void"}
-
If true, the options are shown when the dropdown is hovered.
- false
+ This function will be called every time the selection changes. The value of the selected option will be
+ passed as a parameter.
- This function will be called every time the selection changes. The value of the selected option will be
- passed as a parameter.
+ An array of objects representing the options. Each object has the following properties:
+
+
+ label: Option display value.
+
+
+ icon:{" "}
+
+ Material Symbol
+ {" "}
+ name or SVG element as the icon that will be placed next to the option label. When using Material
+ Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled
+ prefix the symbol name with "filled_".
+
In case options include icons, whether the icon should appear after or before the label.
- Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left'
- and 'right' properties in order to specify different margin sizes.
+ 'before'
-
-
size
@@ -223,15 +223,13 @@ const sections = [
},
];
-const DropdownCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const DropdownCodePage = () => (
+
+
+
+
+
+
+);
export default DropdownCodePage;
diff --git a/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx b/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx
new file mode 100644
index 0000000000..d70381de65
--- /dev/null
+++ b/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx
@@ -0,0 +1,149 @@
+import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import DocFooter from "@/common/DocFooter";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
+import Example from "@/common/example/Example";
+import iconUsage from "./examples/iconUsage";
+import Image from "@/common/Image";
+import anatomy from "./images/dropdown_anatomy.png";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ The dropdown enhances usability by displaying a list of choices in a collapsible menu, optimizing space while
+ keeping options easily accessible. It supports icons, sections, and different selection behaviors to adapt to
+ various use cases. Designed for efficiency, it ensures keyboard navigation, accessibility, and proper contrast
+ for readability.
+
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Dropdown: the main container that triggers the list of options when clicked, allowing users
+ to select an item.
+
+
+ Listbox: the expanded panel displaying all available options for selection.
+
+
+ Icon: a visual aid that can accompany the selected option, helping users quickly recognize
+ the category or purpose.
+
+
+ Label: the textual representation of the selected option, ensuring clarity in the user's
+ choice.
+
+
+ Expand/collapse icon: an indicator that shows whether the dropdown is expanded or
+ collapsed.
+
+
+ List item: an individual option within the dropdown list, which users can click to make a
+ selection.
+
+
+
+ ),
+ },
+ {
+ title: "Using dropdowns",
+ content: (
+ <>
+
+ Dropdowns have a similar look and behavior to select components, the difference is that while select is only
+ to collect user's data into a form, dropdown can be used in various scenarios.
+
+
+
+ Dropdowns display a list of options that appear when the user clicks or hovers over the parent element,
+ providing a compact and efficient way to make selections.
+
+
+ The arrow linked to the dropdown label indicates to the user that more options are available but currently
+ hidden.
+
+
+ By default, a dropdown expands below its main container if there is enough screen space to accommodate the
+ full size of the pop-up.
+
+
+
+ If displaying the dropdown below the selector hides important information, reducing discoverability and
+ scanability, consider alternative ways to present the content or adjust the pop-up's position to better fit
+ the application's needs.
+
+
+ ),
+ subSections: [
+ {
+ title: "Icon usage",
+ content: (
+ <>
+
+ Icons can be used within the dropdown component in various configurations. They can be placed before or
+ after the label or serve as the sole content of the dropdown placeholder and options. This maintains
+ consistency with other components in our Design System, such as buttons and selects, which follow the same
+ behavior.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ User clear and concise labels: ensure dropdown labels are descriptive and easily understood,
+ helping users quickly grasp their choices. Avoid vague terms like "Select an option.”
+
+
+ Prioritize logical ordering: arrange options in a meaningful order—alphabetically for lists,
+ by frequency of use for common selections, or categorically when grouping similar items.
+
+
+ Keep the list of options manageable: avoid overwhelming users with too many options. If the
+ list is long, consider using grouped sections or an alternative selection method like autocomplete.
+
+
+ Ensure accessibility: provide sufficient contrast, keyboard navigation, and screen reader
+ support. Icons should always have accessible labels to maintain clarity.
+
+
+ Avoid nesting too deep: multi-level dropdowns can be hard to navigate. If multiple selection
+ levels are required, consider using a different component, like a sidebar or tree structure.
+
+
+ Be mindful of placement and screen space: ensure the dropdown appears in a location where it
+ doesn't obscure critical content. If needed, adjust its position dynamically to fit within the viewport.
+
+
+ Use icons thoughtfully: icons can enhance usability but should only be added when they add
+ clarity. Overloading the dropdown with icons can create visual clutter.
+
+
+ ),
+ },
+];
+
+const DropdownOverviewPage = () => (
+
+
+
+
+
+
+);
+
+export default DropdownOverviewPage;
diff --git a/apps/website/screens/components/dropdown/usage/examples/iconUsage.ts b/apps/website/screens/components/dropdown/overview/examples/iconUsage.ts
similarity index 100%
rename from apps/website/screens/components/dropdown/usage/examples/iconUsage.ts
rename to apps/website/screens/components/dropdown/overview/examples/iconUsage.ts
diff --git a/apps/website/screens/components/dropdown/overview/images/dropdown_anatomy.png b/apps/website/screens/components/dropdown/overview/images/dropdown_anatomy.png
new file mode 100644
index 0000000000..d76d897b90
Binary files /dev/null and b/apps/website/screens/components/dropdown/overview/images/dropdown_anatomy.png differ
diff --git a/apps/website/screens/components/dropdown/specs/DropdownSpecsPage.tsx b/apps/website/screens/components/dropdown/specs/DropdownSpecsPage.tsx
deleted file mode 100644
index 563745d180..0000000000
--- a/apps/website/screens/components/dropdown/specs/DropdownSpecsPage.tsx
+++ /dev/null
@@ -1,585 +0,0 @@
-import { DxcTable, DxcParagraph, DxcBulletedList, DxcFlex, DxcLink } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import Figure from "@/common/Figure";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import specsImage from "./images/dropdown_specs.png";
-import statesImage from "./images/dropdown_states.png";
-import optionListStatesImage from "./images/dropdown_option_list_states.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "States",
- subSections: [
- {
- title: "Dropdown button",
- content: (
- <>
-
- States: enabled, hover, focus, active{" "}
- and disabled.
-
-
-
-
-
- ),
- },
- {
- title: "Option list",
- content: (
- <>
-
- States: Enabled, hover, focus and{" "}
- selected.
-
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-