# Dropdown **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-dropdown--introduction ## Variants documented in Storybook - DropdownSize: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-dropdown--dropdownsize - StatusVarient: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-dropdown--statusvarient - SelectionTypes: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-dropdown--selectiontypes - DropdownButton: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-dropdown--dropdownbutton - DropdownOverflow: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-dropdown--dropdownoverflow ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Dropdown. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Dropdown Button — DropdownButton btn-text HTML: ```html

Medium(M)

``` React: ```jsx import React from 'react'; const DropdownExample1Demo = () => ( <>

Medium(M)

); export default DropdownExample1Demo; ``` Angular: ```html

Medium(M)

``` ### 2. Dropdown Button — DropdownButton btn-outline HTML: ```html

Medium(M)

``` React: ```jsx import React from 'react'; const DropdownExample2Demo = () => ( <>

Medium(M)

); export default DropdownExample2Demo; ``` Angular: ```html

Medium(M)

``` ### 3. Dropdown Button — DropdownButton btn-tonal HTML: ```html

Medium(M)

``` React: ```jsx import React from 'react'; const DropdownExample3Demo = () => ( <>

Medium(M)

); export default DropdownExample3Demo; ``` Angular: ```html

Medium(M)

``` ### 4. Dropdown Button — DropdownButton btn-filled HTML: ```html

Medium(M)

``` React: ```jsx import React from 'react'; const DropdownExample4Demo = () => ( <>

Medium(M)

); export default DropdownExample4Demo; ``` Angular: ```html

Medium(M)

``` ### 5. Dropdown Overflow — DropdownOverflow ovf-text HTML: ```html

Medium(M)

``` React: ```jsx import React from 'react'; const DropdownExample5Demo = () => ( <>

Medium(M)

); export default DropdownExample5Demo; ``` Angular: ```html

Medium(M)

``` ### 6. Dropdown Overflow — DropdownOverflow ovf-outline HTML: ```html

Medium(M)

``` React: ```jsx import React from 'react'; const DropdownExample6Demo = () => ( <>

Medium(M)

); export default DropdownExample6Demo; ``` Angular: ```html

Medium(M)

``` ### 7. Dropdown Overflow — DropdownOverflow ovf-tonal HTML: ```html

Medium(M)

``` React: ```jsx import React from 'react'; const DropdownExample7Demo = () => ( <>

Medium(M)

); export default DropdownExample7Demo; ``` Angular: ```html

Medium(M)

``` ### 8. Dropdown Overflow — DropdownOverflow ovf-filled HTML: ```html

Medium(M)

``` React: ```jsx import React from 'react'; const DropdownExample8Demo = () => ( <>

Medium(M)

); export default DropdownExample8Demo; ``` Angular: ```html

Medium(M)

``` ### 9. Dropdown Size — DropdownSize dropdown-size-selection HTML: ```html

Small (S)

Medium (M)

Large (L)

``` React: ```jsx import React from 'react'; const DropdownExample9Demo = () => ( <>

Small (S)

info Description

Medium (M)

info Description

Large (L)

info Description

); export default DropdownExample9Demo; ``` Angular: ```html

Small (S)

Medium (M)

Large (L)

``` ### 10. Dropdown Size — DropdownSize dropdown-size-button HTML: ```html

Small(S)

Medium(M)

Large(L)

``` React: ```jsx import React from 'react'; const DropdownExample10Demo = () => ( <>

Small(S)

Medium(M)

Large(L)

); export default DropdownExample10Demo; ``` Angular: ```html

Small(S)

Medium(M)

Large(L)

``` ### 11. Dropdown Size — DropdownSize dropdown-size-overflow HTML: ```html

Small(S)

Medium(M)

Large(L)

``` React: ```jsx import React from 'react'; const DropdownExample11Demo = () => ( <>

Small(S)

Medium(M)

Large(L)

); export default DropdownExample11Demo; ``` Angular: ```html

Small(S)

Medium(M)

Large(L)

``` ### 12. Introduction — Introduction HTML: ```html

Components

Dropdowns

Dropdown menu is a user interface element that reveals a hidden list of options, links or actions when you click or hover over a trigger button.

Implementation Showcase

Visual demonstration of various dropdown variants including Selection, Button, and Overflow styles.

Selection Dropdown

Button Dropdown

Overflow Dropdown

CSS Class Reference

Quickly copy sizing and variant utility classes for Dropdowns.

Trigger Types

Form Selection Style ux4g-dropdown-selection

Action Button Style ux4g-dropdown-button

Icon Overflow Style ux4g-dropdown-overflow

Single Choice Logic ux4g-dropdown-single

Multi Choice Logic ux4g-dropdown-multi

Dropdown Sizes

Large ux4g-dropdown-lg

Medium ux4g-dropdown-md

Small ux4g-dropdown-sm

``` React: ```jsx import React from 'react'; const DropdownExample12Demo = () => ( <>

Components

Dropdowns

Dropdown menu is a user interface element that reveals a hidden list of options, links or actions when you click or hover over a trigger button.

Implementation Showcase

Visual demonstration of various dropdown variants including Selection, Button, and Overflow styles.

Selection Dropdown

Button Dropdown

Overflow Dropdown

CSS Class Reference

Quickly copy sizing and variant utility classes for Dropdowns.

{/* Variant Classes */}

Trigger Types

Form Selection Style ux4g-dropdown-selection

Action Button Style ux4g-dropdown-button

Icon Overflow Style ux4g-dropdown-overflow

Single Choice Logic ux4g-dropdown-single

Multi Choice Logic ux4g-dropdown-multi

{/* Size Classes */}

Dropdown Sizes

Large ux4g-dropdown-lg

Medium ux4g-dropdown-md

Small ux4g-dropdown-sm

); export default DropdownExample12Demo; ``` Angular: ```html

Components

Dropdowns

Dropdown menu is a user interface element that reveals a hidden list of options, links or actions when you click or hover over a trigger button.

Implementation Showcase

Visual demonstration of various dropdown variants including Selection, Button, and Overflow styles.

Selection Dropdown

Button Dropdown

Overflow Dropdown

CSS Class Reference

Quickly copy sizing and variant utility classes for Dropdowns.

Trigger Types

Form Selection Style ux4g-dropdown-selection

Action Button Style ux4g-dropdown-button

Icon Overflow Style ux4g-dropdown-overflow

Single Choice Logic ux4g-dropdown-single

Multi Choice Logic ux4g-dropdown-multi

Dropdown Sizes

Large ux4g-dropdown-lg

Medium ux4g-dropdown-md

Small ux4g-dropdown-sm

``` ### 13. Selection Types — SelectionTypes type-single-1 HTML: ```html

``` React: ```jsx import React from 'react'; const DropdownExample13Demo = () => ( <>

info Description

); export default DropdownExample13Demo; ``` Angular: ```html

``` ### 14. Selection Types — SelectionTypes type-single-2 HTML: ```html

``` React: ```jsx import React from 'react'; const DropdownExample14Demo = () => ( <>

info Description

); export default DropdownExample14Demo; ``` Angular: ```html

``` ### 15. Selection Types — SelectionTypes type-single-3 HTML: ```html

``` React: ```jsx import React from 'react'; const DropdownExample15Demo = () => ( <>

info Description

); export default DropdownExample15Demo; ``` Angular: ```html

``` ### 16. Selection Types — SelectionTypes type-single-4 HTML: ```html

``` React: ```jsx import React from 'react'; const DropdownExample16Demo = () => ( <>

info Description

); export default DropdownExample16Demo; ``` Angular: ```html

``` ### 17. Selection Types — SelectionTypes type-single-5 HTML: ```html

``` React: ```jsx import React from 'react'; const DropdownExample17Demo = () => ( <>

info Description

); export default DropdownExample17Demo; ``` Angular: ```html

``` ### 18. Selection Types — SelectionTypes type-multi-1 HTML: ```html

``` React: ```jsx import React from 'react'; const DropdownExample18Demo = () => ( <>

info Description

); export default DropdownExample18Demo; ``` Angular: ```html

``` ### 19. Selection Types — SelectionTypes type-multi-2 HTML: ```html

``` React: ```jsx import React from 'react'; const DropdownExample19Demo = () => ( <>

info Description

); export default DropdownExample19Demo; ``` Angular: ```html

``` ### 20. Selection Types — SelectionTypes type-multi-3 HTML: ```html

``` React: ```jsx import React from 'react'; const DropdownExample20Demo = () => ( <>

info Description

); export default DropdownExample20Demo; ``` Angular: ```html

``` ### 21. Selection Types — SelectionTypes type-multi-4 HTML: ```html

``` React: ```jsx import React from 'react'; const DropdownExample21Demo = () => ( <>

info Description

); export default DropdownExample21Demo; ``` Angular: ```html

``` ### 22. Status Varient — StatusVarient status-disabled HTML: ```html

Medium(M)

``` React: ```jsx import React from 'react'; const DropdownExample22Demo = () => ( <>

Medium(M)

info Description

); export default DropdownExample22Demo; ``` Angular: ```html

Medium(M)

``` ### 23. Status Varient — StatusVarient status-error HTML: ```html

Medium(M)

``` React: ```jsx import React from 'react'; const DropdownExample23Demo = () => ( <>

Medium(M)

error Error message

); export default DropdownExample23Demo; ``` Angular: ```html

Medium(M)

``` ### 24. Status Varient — StatusVarient status-success HTML: ```html

Medium(M)

``` React: ```jsx import React from 'react'; const DropdownExample24Demo = () => ( <>

Medium(M)

check_circle Success message

); export default DropdownExample24Demo; ``` Angular: ```html

Medium(M)

``` ### 25. Status Varient — StatusVarient status-warning HTML: ```html

Medium(M)

``` React: ```jsx import React from 'react'; const DropdownExample25Demo = () => ( <>

Medium(M)

warning Warning message

); export default DropdownExample25Demo; ``` Angular: ```html

Medium(M)

``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.