Semantic-UI Menu Colored Variation

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.

Semantic UI menu provides us with different menu classes to make the navigation bar or side menus more beautiful. Semantic UI uses flexbox in the menus allowing each menu item to automatically stretch to the size of the largest item. In this article let us see about the menu coloured variation.

Semantic UI Segment Menu Coloured Variation Classes:

• red: This sets the menu item colour as red.
• orange: This sets the menu item colour like orange.
• yellow: This sets the menu item colour as yellow.
• olive: This sets the menu item colour as olive.
• green: This sets the menu item colour as green.
• teal: This sets the menu item colour as teal.
• blue: This sets the menu item colour as blue.
• violet: This sets the menu item colour as violet.
• purple: This sets the menu item colour as purple.
• pink: This sets the menu item colour like pink.
• brown: This sets the menu item colour as brown.
• grey: This sets the menu item colour like grey.
• black: This sets the menu item colour as black.
• inverted: This sets the inverted colour menu item.

Syntax:

<div class="ui color item menu">
 <a class="item">
 ...
 </a>
 <a class="item">
 ....
 </a>

</div>

Example-1: This example demonstrates the menu coloured variation type.

Output:

👁 Semantic-UI Menu Colored Variation

Example-2: This example demonstrates the menu inverted coloured variation type.

Output :

👁 Semantic-UI Menu Colored Variation

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