Dropdowns

Overview

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're toggled by clicking, not by hovering; this is an intentional design decision.

Examples

Single button

Here's how you can create simple dropdown element:

Dropdown headerGo to GoogleGo to RedHatGo to MicrosoftNo Link #No Href

Web Component

<uxf-dropdown label="Dropdown">    <uxf-dropdown-item-header>Dropdown header</uxf-dropdown-item-header>    <uxf-dropdown-item><a href="http://google.com/">Go to Google</a></uxf-dropdown-item>    <uxf-dropdown-item><a href="http://redhat.com/" class="disabled">Go to RedHat</a></uxf-dropdown-item>    <uxf-dropdown-item><a href="http://microsoft.com/" class="active">Go to Microsoft</a></uxf-dropdown-item>    <uxf-dropdown-item-divider></uxf-dropdown-item-divider>    <uxf-dropdown-item><a href="#">No Link #</a></uxf-dropdown-item>    <uxf-dropdown-item><a>No Href</a></uxf-dropdown-item>    <uxf-dropdown-item>        <button>With text</button>    </uxf-dropdown-item>    <uxf-dropdown-item>        <button>With <b><i>html</i></b> children</button>    </uxf-dropdown-item></uxf-dropdown>

React

<UxfDropdown label="Dropdown">  <UxfDropdownItemHeader>Dropdown header</UxfDropdownItemHeader>  <UxfDropdownItem><a href="http://google.com/">Go to Google</a></UxfDropdownItem>  <UxfDropdownItem><a href="http://redhat.com/" className="disabled">Go to RedHat</a></UxfDropdownItem>  <UxfDropdownItem><a href="http://microsoft.com/" className="active">Go to Microsoft</a></UxfDropdownItem>  <UxfDropdownItemDivider/>  <UxfDropdownItem><a href="#">No Link #</a></UxfDropdownItem>  <UxfDropdownItem><a>No Href</a></UxfDropdownItem>  <UxfDropdownItem>    <button>With text</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>With <b><i>html</i></b> children</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Dropdown">    <uxf-dropdown-item-header>Dropdown header</uxf-dropdown-item-header>    <uxf-dropdown-item><a href="http://google.com/">Go to Google</a></uxf-dropdown-item>    <uxf-dropdown-item><a href="http://redhat.com/" class="disabled">Go to RedHat</a></uxf-dropdown-item>    <uxf-dropdown-item><a href="http://microsoft.com/" class="active">Go to Microsoft</a></uxf-dropdown-item>    <uxf-dropdown-item-divider></uxf-dropdown-item-divider>    <uxf-dropdown-item><a href="#">No Link #</a></uxf-dropdown-item>    <uxf-dropdown-item><a>No Href</a></uxf-dropdown-item>    <uxf-dropdown-item>        <button>With text</button>    </uxf-dropdown-item>    <uxf-dropdown-item>        <button>With <b><i>html</i></b> children</button>    </uxf-dropdown-item></uxf-dropdown>

By supplying "variant" property, you can crete different variants:

Web Component

<uxf-dropdown label="Secondary" variant="secondary">    <uxf-dropdown-item>        <button>Menu 1</button>    </uxf-dropdown-item>    <uxf-dropdown-item>        <button>Menu 2</button>    </uxf-dropdown-item>    <uxf-dropdown-item>        <button>Menu 3</button>    </uxf-dropdown-item></uxf-dropdown>

React

<UxfDropdown label="Secondary" variant="secondary">  <UxfDropdownItem>    <button>Menu 1</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Secondary" variant="secondary">    <uxf-dropdown-item>        <button>Menu 1</button>    </uxf-dropdown-item>    <uxf-dropdown-item>        <button>Menu 2</button>    </uxf-dropdown-item>    <uxf-dropdown-item>        <button>Menu 3</button>    </uxf-dropdown-item></uxf-dropdown>

Split button

By supplying "split" property, you can crete split dropdown:

Web Component

<uxf-dropdown label="Split" variant="secondary" split="true" >    <uxf-dropdown-item><button>Menu 1</button></uxf-dropdown-item>    <uxf-dropdown-item><button>Menu 2</button></uxf-dropdown-item>    <uxf-dropdown-item><button>Menu 3</button></uxf-dropdown-item></uxf-dropdown>

React

<UxfDropdown label="Split" variant="secondary" split="true">  <UxfDropdownItem>    <button>Menu 1</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Split" variant="secondary" split="true" >    <uxf-dropdown-item><button>Menu 1</button></uxf-dropdown-item>    <uxf-dropdown-item><button>Menu 2</button></uxf-dropdown-item>    <uxf-dropdown-item><button>Menu 3</button></uxf-dropdown-item></uxf-dropdown>

Different variants of split button:

Web Component

<uxf-dropdown label="Secondary" variant="secondary" split="true">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

React

<UxfDropdown label="Secondary" variant="secondary" split="true">  <UxfDropdownItem>    <button>Menu 1</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Secondary" variant="secondary" split="true">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

Sizing

Large

By supplying "lg" property, you can crete large dropdown:

Web Component

<uxf-dropdown label="Large" variant="secondary" lg>  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

React

<UxfDropdown label="Large" variant="secondary" lg>  <UxfDropdownItem>    <button>Menu 1</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Large" variant="secondary" lg>  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

Small

By supplying "sm" property, you can crete small dropdown:

Web Component

<uxf-dropdown label="Small" variant="secondary" sm>  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

React

<UxfDropdown label="Small" variant="secondary" sm>  <UxfDropdownItem>    <button>Menu 1</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Small" variant="secondary" sm>  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

Dark

By supplying "dark" property, you can crete dark dropdown:

Web Component

<uxf-dropdown label="Dark" variant="secondary" dark="true">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

React

<UxfDropdown label="Dark" variant="secondary" dark="true">  <UxfDropdownItem>    <button>Menu 1</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Dark" variant="secondary" dark="true">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

Disabled

By supplying "disabled" property, you can disable the dropdown:

Web Component

<uxf-dropdown label="Disabled" variant="secondary" disabled="true">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

React

<UxfDropdown label="Disabled" variant="secondary" disabled="true">  <UxfDropdownItem>    <button>Menu 1</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Disabled" variant="secondary" disabled="true">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

Opened

By supplying "open" property, you can set dropdown to be initially opened:

Web Component

<uxf-dropdown label="Opened" variant="secondary" open="true">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

React

<UxfDropdown label="Opened" variant="secondary" open="true">  <UxfDropdownItem>    <button>Menu 1</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Opened" variant="secondary" open="true">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

Directions

Up

Trigger dropdown menus above elements by setting "direction" property to "up".

Web Component

<uxf-dropdown label="Dropup" variant="secondary" direction="up">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

React

<UxfDropdown label="Dropup" variant="secondary" direction="up">  <UxfDropdownItem>    <button>Menu 1</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Dropup" variant="secondary" direction="up">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

Right

Trigger dropdown menus at the right of the elements by setting "direction" property to "end".

Web Component

<uxf-dropdown label="Dropend" variant="secondary" direction="end">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

React

<UxfDropdown label="Dropend" variant="secondary" direction="end">  <UxfDropdownItem>    <button>Menu 1</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Dropend" variant="secondary" direction="end">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

Left

Trigger dropdown menus at the left of the elements by setting "direction" property to "start".

Web Component

<uxf-dropdown label="Dropstart" variant="secondary" direction="start">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

React

<UxfDropdown label="Dropstart" variant="secondary" direction="start">  <UxfDropdownItem>    <button>Menu 1</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Dropstart" variant="secondary" direction="start">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

Menu items

There are three types of menu items that can be passed to a dropdown:

• General item: UxfDropdownItem
• Header item: UxfDropdownItemHeader
• Divider item: UxfDropdownItemDivider

Header

Use UxfDropdownItemHeader to style the item as menu header.

Header

Web Component

<uxf-dropdown label="Dropdown" variant="secondary">  <uxf-dropdown-item-header>Header</uxf-dropdown-item-header>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

React

<UxfDropdown label="Dropdown" variant="secondary">  <UxfDropdownItemHeader>Header</UxfDropdownItemHeader>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Dropdown" variant="secondary">  <uxf-dropdown-item-header>Header</uxf-dropdown-item-header>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

You can optionally pass header item content as child content:

Rich text header

Web Component

<uxf-dropdown label="Dropdown" variant="secondary">  <uxf-dropdown-item-header> <span>Rich <b><i>text</i></b> header</span> </uxf-dropdown-item-header>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

React

<UxfDropdown label="Dropdown" variant="secondary">  <UxfDropdownItemHeader> <span>Rich <b><i>text</i></b> header</span> </UxfDropdownItemHeader>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Dropdown" variant="secondary">  <uxf-dropdown-item-header> <span>Rich <b><i>text</i></b> header</span> </uxf-dropdown-item-header>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

Divider

Use UxfDropdownItemDivider to style the item as divider line.
UxfDropdownItemDivider component expects no properties.

Header

Web Component

<uxf-dropdown label="Dropdown" variant="secondary">  <uxf-dropdown-item-header>Header</uxf-dropdown-item-header>  <uxf-dropdown-item-devider />  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

React

<UxfDropdown label="Dropdown" variant="secondary">  <UxfDropdownItemHeader>Header</UxfDropdownItemHeader>  <UxfDropdownItemDivider/>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Dropdown" variant="secondary">  <uxf-dropdown-item-header>Header</uxf-dropdown-item-header>  <uxf-dropdown-item-devider />  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

General

Use UxfDropdownItem to style the item as menu item.
UxfDropdownItem component expects html child element.

Web Component

<uxf-dropdown label="Dropdown" variant="secondary">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

React

<UxfDropdown label="Dropdown" variant="secondary">  <UxfDropdownItem>    <button>Menu 1</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Dropdown" variant="secondary">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

You can optionally pass item content as child content:

Web Component

<uxf-dropdown label="Dropdown" variant="secondary">  <uxf-dropdown-item>    <button><span>Rich <b><i>text</i></b> item</span></button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

React

<UxfDropdown label="Dropdown" variant="secondary">  <UxfDropdownItem>    <button><span>Rich <b><i>text</i></b> item</span></button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Dropdown" variant="secondary">  <uxf-dropdown-item>    <button><span>Rich <b><i>text</i></b> item</span></button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

You can pass anchor element as child to redirect the user on item click:

Go to Google

Web Component

<uxf-dropdown label="Dropdown" variant="secondary">  <uxf-dropdown-item>    <a href="http://google.com/">Go to Google</a>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

React

<UxfDropdown label="Dropdown" variant="secondary">  <UxfDropdownItem>    <a href="http://google.com/">Go to Google</a>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Dropdown" variant="secondary">  <uxf-dropdown-item>    <a href="http://google.com/">Go to Google</a>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

You can mark item as active by passing "active" property:

Web Component

<uxf-dropdown label="Dropdown" variant="secondary">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button active="true">Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

React

<UxfDropdown label="Dropdown" variant="secondary">  <UxfDropdownItem>    <button>Menu 1</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button active="true">Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Dropdown" variant="secondary">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button active="true">Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

You can disable item by passing "disabled" property:

Web Component

<uxf-dropdown label="Dropdown" variant="secondary">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button disabled="disabled">Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

React

<UxfDropdown label="Dropdown" variant="secondary">  <UxfDropdownItem>    <button>Menu 1</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button disabled="disabled">Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Dropdown" variant="secondary">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button disabled="disabled">Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

Auto close behavior

By default, the dropdown menu is closed when clicking inside or outside the dropdown menu.
You can use the autoClose option to change this behavior of the dropdown. Available options:

• true
• inside
• outside
• false

Web Component

<uxf-dropdown label="Dropdown" variant="secondary" autoClose="true">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown><uxf-dropdown label="Dropdown" variant="secondary" autoClose="inside">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown><uxf-dropdown label="Dropdown" variant="secondary" autoClose="outside">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown><uxf-dropdown label="Dropdown" variant="secondary" autoClose="false">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

React

<UxfDropdown label="Default" variant="secondary" autoClose="true">  <UxfDropdownItem>    <button>Menu 1</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown><UxfDropdown label="Inside" variant="secondary" autoClose="inside">  <UxfDropdownItem>    <button>Menu 1</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown><UxfDropdown label="Outside" variant="secondary" autoClose="outside">  <UxfDropdownItem>    <button>Menu 1</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown><UxfDropdown label="Manual" variant="secondary" autoClose="false">  <UxfDropdownItem>    <button>Menu 1</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Dropdown" variant="secondary" autoClose="true">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown><uxf-dropdown label="Dropdown" variant="secondary" autoClose="inside">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown><uxf-dropdown label="Dropdown" variant="secondary" autoClose="outside">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown><uxf-dropdown label="Dropdown" variant="secondary" autoClose="false">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

Events

Split button click

Web Component

<uxf-dropdown id="splitButtonClick" label="Dropdown" variant="secondary" split="true">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>
<script>  document.querySelector("#splitButtonClick").addEventListener("buttonClick", ()=>{    alert("button click event triggered: " + JSON.stringify(e))  })</script>

React

<UxfDropdown label="Dropdown" variant="secondary" split="true" onButtonClick={(e) => alert("button click event triggered: " + JSON.stringify(e))}>  <UxfDropdownItem>    <button>Menu 1</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Dropdown" variant="secondary" split="true">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

Dropdown click

Web Component

<uxf-dropdown label="Dropdown" variant="secondary">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>
<script>    document.querySelector("#dropdownButtonClick").addEventListener("dropdownClick", ()=>{        alert("dropdown click event triggered: " + JSON.stringify(e))    })</script>

React

<UxfDropdown label="Dropdown" variant="secondary" onDropdownClick={(e) => alert("dropdown click event triggered: " + JSON.stringify(e))}>  <UxfDropdownItem>    <button>Menu 1</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown label="Dropdown" variant="secondary">  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>

Dropdown item click

Web Component

<uxf-dropdown id="dropdownItemClick" label="Dropdown" variant="secondary" >  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>
<script>  document.querySelector("#dropdownItemClick").addEventListener("dropdownItemClick", ()=>{    alert("dropdown item click event triggered: " + JSON.stringify(e))  })</script>

React

<UxfDropdown label="Dropdown" variant="secondary"  onDropdownItemClick={(e) => alert("dropdown item click event triggered: " + JSON.stringify(e))}>  <UxfDropdownItem>    <button>Menu 1</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 2</button>  </UxfDropdownItem>  <UxfDropdownItem>    <button>Menu 3</button>  </UxfDropdownItem></UxfDropdown>

Angular

<uxf-dropdown id="dropdownItemClick" label="Dropdown" variant="secondary" >  <uxf-dropdown-item>    <button>Menu 1</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 2</button>  </uxf-dropdown-item>  <uxf-dropdown-item>    <button>Menu 3</button>  </uxf-dropdown-item></uxf-dropdown>
<script>  document.querySelector("#dropdownItemClick").addEventListener("dropdownItemClick", ()=>{    alert("dropdown item click event triggered: " + JSON.stringify(e))  })</script>