How to create Vertical Menu using HTML and CSS ?

Last Updated : 09 May, 2023

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.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content=
        "width=device-width,initial-scale=1">

    <style>
        .vertical-menu {
            width: 200px;
        }

        .vertical-menu a {
            background-color: #eee;
            color: black;
            display: block;
            padding: 12px;
            text-decoration: none;
        }

        .vertical-menu a:hover {
            background-color: #ccc;
        }

        .vertical-menu a.active {
            background-color: #04AA6D;
            color: white;
        }
    </style>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    
    <h3>Vertical Menu</h3>

    <div class="vertical-menu">
        <a href="#" class="active">Home</a>
        <a href="#">About Us </a>
        <a href="#">Contact Us</a>
        <a href="#">Login </a>
        <a href="#">Sign Up</a>
    </div>
</body>
</html>

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.

HTML