Vertical Navbar in CSS

A CSS Navbar (Navigation Bar) is a user interface element that typically contains links to various sections of a website. It's an essential part of a website's design, providing users with an easy way to navigate through different pages or content.

Navbars can be styled and positioned in various ways using CSS to create a seamless and visually appealing navigation experience.


Vertical Navbar

A vertical navbar displays navigation links in a column, typically along the left or right side of the page.


<style>
   .v-navbar {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 200px;
      background-color: #333;
   }

   .v-navbar li {
      display: block;
   }

   .v-navbar li a {
      display: block;
      color: white;
      padding: 8px 16px;
      text-decoration: none;
   }

   .v-navbar li a:hover {
      background-color: #111;
   }
</style>
<nav>
   <ul class="v-navbar">
      <li><a href="#home">Home</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
   </ul>
</nav>

 the navbar is vertical, with each link displayed in a stacked manner.