Semantic-UI Menu States

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 make your website look more amazing. It uses a class to add CSS to the elements.

The menu is used to group items that are used to navigate the website. Semantic UI provides us with a styled menu. Let's have a look at various menu states.

Semantic UI Menu States:

• Hover: This state makes the background of the menu items darker when hovered, indicating an action can be performed by clicking on it.
• Active: This provides us with an option of making a menu item darker, which can be used to indicate an important element.

Syntax:

<div class="ui menu">
 <div class="active item">
 ...
 </div>
 ...
</div>

Example 1: In the below example, we have created hoverable menu items using the link class.

Output:

👁 Semantic-UI Menu States

Example 2: In the below example, we have created a menu with active items.

Output:

👁 Semantic-UI Menu States

Reference: https://semantic-ui.com/collections/menu.html