Raised

Flat

Toggle 1

@for (case of cases | stringFilter: caseFilter; track case) { }

Dropdown menus can be created using the ux-menu component. Each item within the menu should have a [uxMenuItem] directive applied to it which will automatically add all accessibility attributes and keyboard navigation.

The element that launches the menu should have a [uxMenuTriggerFor] directive applied and should be passed the MenuComponent that it should show. The menu can also be programmatically controlled by accessing the menu trigger directive using @ViewChild(MenuTriggerDirective).

When using *ngFor make sure to use the trackBy function to prevent the menu from closing unexpectedly if the items are updated.

The ux-menu-divider component can be used to add separators between menu items.

UX Aspects provides additional styles to create menus with common features including gutter icons, keyboard shortcut hints, and submenus.

dropdown-menu-icon - This contains the icon, which may be one of the UX Aspects Icons or an image. If no icon is required, leave this empty to ensure a consistent gutter for other items with icons.
dropdown-menu-text - This contains the menu text.
dropdown-menu-right - Optionally, this may contain right aligned text or icons. dropdown-menu-hint provides a default text style for keyboard shortcut hints here.

Using UX Aspects components in the Dropdown Menu

The uxMenuItemCustomControl directive can be added to any element to to focus it within the menu. It can also be added to the following UX Aspects components to make them work within the ux-menu

Checkbox
Radio Button
Toggle Switch

The following inputs and outputs are available on the menu component and directives:

Define where the menu will appear relative to the trigger element. Define the alignment of the menu relative to the trigger element. Define if the menu should animate when opening and closing. Define a class that should be given to the menu.

Emits when the menu starts opening. Emits when the menu has opened, after the animation completes. Emits when the menu starts closing. Emits when the menu has closed, after the animation completes.

Define if this item is disabled. Define the role of the menu item. Determine if the menu should close on click of the menu item.

Emits when the menu item is clicked or the enter key is pressed.

Define the menu to open. Define if this trigger is disabled. Optionally define the menu's parent element. See the Split Button Dropdown documentation for an example. Determine if the menu should close when it loses focus.

Emits when the menu is closed.

Programmatically open the menu. Programmatically close the menu. Optionally provide the focus origin and whether or not all parent menus should be closed. Programmatically toggle the open state of the menu.

Define if this item is disabled.

The following code can be used to create the example above: