How to create Vertical Menu using HTML and CSS ?

In This article, we will learn how to create vertical menus by using HTML and CSS.

Vertical Menu: We can create a vertical menu in the form of buttons and a scrollable menu. Vertical Menu is the buttons arranged in the vertical menu bar/navbar.

How to create a vertical menu using buttons: We can create it simply by using HTML and CSS. We will create a simple structure of the web page by using <div>,<li>, and <a> tags.

Syntax:

<div class="vertical-menu">
 <a href="#" class="active">Home</a>
 <a href="#">1</a>
 ...
 <a href="#">n</a>
</div>

Example: Here is the implementation of the above-explained method.

Output:

👁 vertical menu

How to create a vertical menu using scrollable: Here, we will see how to create a vertical menu using scrollable. To make this, we will use simple HTML and CSS.

Syntax:

<div class="vertical-menu">
 <a href="#" class="active">Home</a>
 <a href="#">1</a>
 ...
 <a href="#">n</a>
</div>

Example: In this example implementation of the above demonstrated method.

Output:

👁 vertical menu with scrollbar