What are the Materialize classes of Dropdowns ?

Materialize is a modern responsive CSS framework based on Material Design by Google. Its goal is to develop a system of design that allows integrated user experience across all its services on any platform. Materialize is a design language that combines the classic principles of successful design along with innovation and technology. Materialize comes with various useful components which helps developer to create responsive websites. 

Dropdown is one of the built-in components of materialize CSS. Dropdown in Materialize CSS is basically used to allow the user to select one of the values in a list. Materialize CSS has a stylish dropdown list having various interactive options.

Materialize CSS provides various CSS classes to create a nice dropdown in an easy way. The following are the available classes and their usage.

• dropdown-content:  It is used to identify an unordered list (ul) as a materialize dropdown component. It is required for ul element.
• data-activates : It is used to specify the ID of the dropdown unordered list (ul) element.

Dropdown in Materialize CSS provides several CSS classes to add a dropdown list to any button. Only you need to make sure that the data-activates attribute id matches the id in the unordered list element tag i.e. <ul>. You can add a divider to divide two elements of ul tag, with the class "divider". You can also add icons as implemented in the following examples.

Example 1: The following example demonstrates a simple dropdown box.

Output: 

Example 2: The following example demonstrates a dropdown with Materialize CSS Badges Component with some options setting in the initialization of the dropdown plugin.

Output: