Skip to main content

CSS Vertical Navigation Bar

The horizontal navigation bar is the horizontal list of links, which is generally on the top of the page.

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

li a {  
	display:  block;  
	width:  60px;  
	background-color: #dddddd;
}

Example vertical navigation bar

You can also set the width of <ul>, and remove the width of <a>, as they will take up the full width available when displayed as block elements. This will produce the same result as our previous example:

ul {  
	list-style-type:  none;  
	margin:  0;  
	padding:  0;  
	width:  60px;  
}  
  
li a {  
	display:  block;  
}

Common cases​

Change color on Mouse Hover​

Create a basic vertical navigation bar with a gray background color and change the background color of the links when the user moves the mouse over them:

ul {  
	list-style-type:  none;  
	margin:  0;  
	padding:  0;  
	width:  200px;  
	background-color:  #f1f1f1;  
}  
  
li a {  
	display:  block;  
	color:  #000;  
	padding:  8px 16px;  
	text-decoration:  none;  
}  
  
/* Change the link color on hover */  
li a:hover {  
	background-color:  #555;  
	color:  white;  
}

Add an "active" class to the current link to let the user know which page he/she is on:

.active {  
	background-color:  #04AA6D;  
	color:  white;  
}

Center Links & Add Borders​

Add text-align:center to <li> or <a> to center the links.

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

ul {  
	border:  1px solid #555;  
}  
  
li {  
	text-align:  center;  
	border-bottom:  1px solid #555;  
}  
  
li:last-child {  
	border-bottom:  none;  
}

Full-height Fixed Vertical Navbar​

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

ul {  
	list-style-type:  none;  
	margin:  0;  
	padding:  0;  
	width:  25%;  
	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 */  
}
note

This example might not work properly on mobile devices.

Table of Contents