Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic UI dropdown allows a user to select a value from a series of options. Semantic-UI Dropdown offers us 11 types of dropdown and 3 types of content Header, divider, and icon. In this article, we will learn about Active State.

Semantic-UI Dropdown Active State is used to create an active dropdown that is having its menu open.

Semantic-UI Dropdown Active State Class:

• active: This class is used to create an active dropdown that is having its menu open.

Syntax:

<div class="..active...">
 Dropdown <i class="dropdown icon"></i>
 <div class="menu">
   ...
 </div>
</div>

Note: An active state will only automatically open a UI simple dropdown. For activating a normal dropdown use “$(‘.ui.dropdown’).dropdown(‘show’)”.

Example 1: The below example illustrates the Semantic-UI Dropdown Active State.

Output:

Semantic-UI Dropdown Active State

Example 2: The below example illustrates the Semantic-UI Dropdown Active State:

Output:

Semantic-UI Dropdown Active State

Reference: https://semantic-ui.com/modules/dropdown.html#active