Semantic-UI Vertical Menu Type

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. The best part about this framework is that it creates beautiful and responsive layouts as it contains pre-built semantic components.

The menu is a component that displays a group of items that serve as navigation between one section of the website to another. It is an essential component and is always present in any website in order to make the navigation easy for the user.

By default, the menu is horizontal and displays the items inside it in a horizontal manner i.e. next to each other. In order to create a vertical menu, Semantic UI provides us with a vertical menu class. This class has the ability to make a menu vertical and display its elements stacked on one another.

Semantic UI Vertical Menu Type Class: 

• vertical menu: This class is used to display the menu in a vertical format.

Syntax: 

<div class="ui vertical menu">

Example 1: In the following program, we will be creating a vertical menu by using the given class.

Output:

Example 2: In the following program, we will be creating a default menu which will be horizontal and a vertical menu in order to understand the significance of the vertical menu class.

Output:

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