Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create Vertical Menu using HTML and CSS ?

  • Difficulty Level : Medium
  • Last Updated : 16 Nov, 2021

Vertical Menu: We can create a vertical menu in 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:

 

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:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta name="viewport" content=
        "width=device-width,initial-scale=1">
  
    <style>
        .vertical-menu {
            width: 200px;
            height: 150px;
            overflow-y: auto;
        }
  
        .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; text-align: center;">
        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 with scrollbar


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!