Vertical Navbar

In a vertical navigation bar, the navigation links are stacked vertically (on

CSS Vertical Navigation Bar

In a vertical navigation bar, the navigation links are stacked vertically (on top of each other), and is typically aligned along the left or right side of a webpage.

The basics of a vertical navigation bar is an unordered list (<ul>), with list items (<li>), each holding a link (<a>), as shown in the Navbar Intro page.

CSS Vertical Navbar Example

Here, we create a basic vertical navigation bar with a gray background color, and we also change the background color and the text color of the links when the user mouse over them:

Home

News

Contact

About

Example

Example Code

css

Try it Yourself

ul {
  list-style-type: none;

margin: 0;
  padding: 0;
  width:
200px;
  background-color: #f1f1f1;
}

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

  /* Change the link and background color on hover */
li a:hover {

background-color: #555555;
  color: white;
}

Example explained:

The first block (ul) is similar to the previous page. In addition we have specified a fixed width (200px) and a light gray background color

The next block (li a) styles elements inside elements

Displaying the links as block elements makes the whole link area clickable (not just the text), and allows us to specify width, padding, margin, height, etc. We add a link color and some padding. We also remove the underline from these elements

The last block (li a:hover) changes the link color and background color when a user mouse over them

Active State

Now we add an "active" class to highlight the link corresponding to the current page to let the user know which page/section he/she is on:

Home

News

Contact

About

Example

Example Code

css

Try it Yourself

.active {
  background-color: #04AA6D;

color: white;
}

Center Navbar Links & Add Borders

To center the navbar links, add text-align: center; to <li> or <a>.

If you want a border around the navbar, add the border property to <ul>.

If you also want borders inside the navbar, add a border-bottom property to all <li> elements, except for the last one:

Home

News

Contact

About

Example

Example Code

css

Try it Yourself

ul {
  border: 1px solid #555555;
}

li {
  text-align: center;

border-bottom: 1px solid #555555;
}

li:last-child {

border-bottom: none;
}

Full-height Vertical Navbar

Create a full-height, "sticky" side navigation:

<iframe src="trycss_navbar_vertical_iframe.htm" style="height:262px;width:100%;border:3px solid #f1f1f1;border-left:none"></iframe>

Example

Example Code

css

Try it Yourself

ul {
  list-style-type: none;

margin: 0;
  padding: 0;
  width:
  130px;
  background-color: #f1f1f1;
  height: 100%; /* Full height */

    position: fixed; /*
Make it stick, even on scroll */

overflow: auto; /* Enable scrolling if the sidenav has too much content */
}