Web Components Dropdown List Component - Overview
Feature-rich, the Web Components Dropdown list offers out-of-the-box filtering, accessibility, preselected values, flexible data binding, grouping, UI customization, and more. What this component practically does is to effectively and easily replace HTML select tags, enabling users to quickly choose a non-editable value from a predefined set of several options.
The Ignite UI for Web Components Dropdown component displays an toggle list of predefined values and allows users to easily select a single option item with a click. It can be quickly configured to act as a Web Components dropdown menu or you can simply use it to deliver more useful visual information by grouping data. Also, with grouping you can use both flat and hierarchical data.
With our component, you get all the functions and customization options you need for your project – styling customizations, Web Components Dropdown placement options, templates and ability to change what and how is displayed in the header, footer, body, list, etc.
Web Components Dropdown Example
The following Web Components Dropdown List example demonstrates the use of simple interactive Web Components Dropdown menu in action with three basic options to choose from. See how it works.
How to use the Dropdown List with Ignite UI for Web Components
First, you need to install the Ignite UI for Web Components by running the following command:
npm install igniteui-webcomponents
} from "igniteui-webcomponents";
For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.
The simplest way to start using the
IgcDropdownComponent is as follows:
The Web Components Dropdown list is positioned relatively to its target. The
target slot allows you to provide a built-in component which toggles the
open property on click. In some cases you would want to use an external target or use another event to toggle the opening of the Dropdown. You can achieve this using the
toggle2 methods which allow you to provide the target as a parameter. By default, the Dropdown list uses
absolute CSS position. You will need to set the
positionStrategy of the Web Components Dropdown to
fixed when the target element is inside a fixed container, but the Dropdown is not. The Dropdown list is automatically sized based on its content, if you want the list to have the same width as the target, you should set the
sameWidth property to
The preferred placement of the Web Components Dropdown can be set using the
placement property. The default placement of the Dropdown is
flip property determines whether the placement should be flipped if there is not enough space to display the Dropdown at the specified placement. The distance from the Web Components Dropdown list to its target can be specified using the
IgcDropdownItemComponent represents a selectable item in the Dropdown list. You could predefine a selected item by setting the
selected property. You could also disable an item so that it can't be selected using the
disabled property. The
IgcDropdownItemComponent has a default slot which allows you to specify the content of the item. You could also provide custom content to be rendered before or after the content using the
suffix slots. The
value property allows you to provide a custom value to an item. If the
value is not set, it resolves to the text content of the item.
You could use the
IgcDropdownHeaderComponent to provide a header for a group of items.
The Web Components Dropdown's items can also be grouped using the
IgcDropdownGroupComponent, making it easier for users to differentiate separate categories. See it in action in this Web Components Dropdown List example:
scrollStrategy property determines the behavior of the component during scrolling the container of the target element. The default value is
scroll which means that the Dropdown will be scrolled with its target. Setting the property to
block will block the scrolling if the Dropdown is opened. You could also set the property to
close which means that the Dropdown will be closed automatically on scroll.
By default, the Dropdown is closed automatically when the user clicks outside of it or selects an item. You could prevent this behavior using the
You can change the appearance of the Dropdown and its items, by using the exposed CSS parts. The
list parts, the
suffix parts and the