Skip to main content Skip to navigation Skip to search

Dropdown

Angular Components

ClrDropdown

ClrDropdown is the parent container for all child components and projected content. It allows users to choose an option or action from a contextual list. ClrDropdown can be nested inside of other ClrDropdown components.

Selector & Basic Usage

Bindings

Binding Type Options Default Description
[clrCloseMenuOnItemClick] input true, false true When false the drop down is not closed if user clicks on menu items.

ClrDropdownMenu

ClrDropdown Menu component holds the menu items and projects group and seperator elements.

Selector & Basic Usage

Bindings

Binding Type Options Default Description
[clrPosition] input top-left, top-right, right-top, right-bottom, bottom-right, bottom-left, left-bottom, left-top bottom-left Set the position orientation to the trigger anchor.

CSS

ClrDropdownMenu can contain optional elements that visually add a header and separator element between menu items. To use them, add an element with the appropriate class.

CSS Class Host Element(s) Type Description Required
.dropdown-divider div Styles the div as a divider element in the menu. false
.dropdown-header label Styles the header element in the menu false

Angular Directives

ClrDropdownTrigger

Selector & Basic Usage

ClrDropdownItem

Selector & Basic Usage

Bindings

Binding Type Options Default Description
[clrDisabled] input true, false null Set the disabled attribute on the host element.
[id] input any string Clarity adds an auto-incremented id Allows a consumer supplied id to be set for the dropdown item host.

ClrIfOpen

ClrIfOpen is a structural directive applied to the ClrDropdownMenu element that manages the DOM creation and destruction for the menu elements.

Selector & Basic Usage

Bindings

Binding Type Options Default Description
[(clrIfOpen)] two-way true, false false Set the open / close state of element it is applied to.