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.
<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.
Example 2: In the below example, we have created a menu with active items.