CSS Vertical Navigation Bar

A CSS Vertical Navigation Bar is a user interface element used in web design to create a navigation menu where the links are arranged vertically, typically in a column. This type of navigation bar is often used in sidebars or as the main navigation for websites that prefer a vertical layout.

To create a vertical navigation bar using CSS, you can apply styles to HTML elements such as <ul> (unordered list) and <l1> (list item) to structure the menu, and <a> (anchor) elements for the actual links. Here's a simple example

Example

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 100%;
      background-color: #333; 
    }

    li {
      text-align: center;
    }

    li a {
      display: block;
      color: white;
      padding: 14px 16px;
      text-decoration: none;
    }

    li a:hover {
      background-color: green;
    }

You can click on above box to edit the code and run again.

To build a vertical navigation bar, you can style the elements inside the list, in addition to the code from the previous page:

Example

  li a {
  display: block;
  width: 80px;
}

You can click on above box to edit the code and run again.

Output

Home

About
Service
Contact

display: block; - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width (and padding, margin, height, etc. if you want)

width: 80px - Block elements take up the full width available by default. We want to specify a 80 pixels width

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 80px;
}

li a {
  display: block;
}

You can click on above box to edit the code and run again.

Output

Home
About
Service
Contact

Center Links & Add Borders

If you want to center the links in your navigation bar and add borders to create a visually distinct appearance, you can modify the CSS styles accordingly. Here's an example of how you can center the links and add borders to a vertical navigation bar:

Example

 ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 200px;
      background-color: #333;
      text-align: center;
    }
    li {
      border-bottom: 1px solid #fff;
    }

    li a {
      display: block;
      color: white;
      padding: 14px 16px;
      text-decoration: none;
    }

    li a:hover {
      background-color: green;
    }

You can click on above box to edit the code and run again.

Output

Home
About
Service
Contact

In this example, the text-align: center; property is applied to the <ul> element to center the links horizontally. Additionally, a border-bottom property is added to the <li> elements to create borders between the links. You can adjust the border properties and other styles based on your design preferences.

Full-height Fixed Vertical Navbar

A full-height fixed vertical navbar is a navigation bar that spans the entire height of the viewport and remains fixed in position as the user scrolls down the page. This type of navigation is commonly used for sidebars or menus that provide quick access to various sections or pages of a website.

Example

.navbar {
      height: 100vh;
      width: 200px;
      position: fixed;
      background-color: #333;
      overflow: hidden;
    }

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

.navbar a:hover {
      background-color: #555;
    }

.content {
      margin-left: 200px;
      padding: 16px;
    }

You can click on above box to edit the code and run again.

Output

Main Content Area

This is the main content of your page. It will be affected by the fixed vertical navbar.