CSS Vertical Navigation Bar

Course recommendations:

Vertical navigation bar

Example

width: 200px;
  li a {
  You can also set the width of <ul> and remove the width of <a> because when displayed as a block element, they will take up all the available width. This will result in the same as our previous example:
}

Try It Yourself

To build a vertical navigation bar, in addition to the code in the previous chapter, you can also set the style of the <a> elements in the list:

  • li a { Example explanation:
  • You can also set the width of <ul> and remove the width of <a> because when displayed as a block element, they will take up all the available width. This will result in the same as our previous example: - Displaying the links as block elements makes the entire link area clickable (not just the text), and we can also specify the width (and if needed, padding, margin, height, etc.).

- By default, block elements will take up all the available width. We need to specify a width of 60 pixels.

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  You can also set the width of <ul> and remove the width of <a> because when displayed as a block element, they will take up all the available width. This will result in the same as our previous example:
} 
width: 200px;
  li a {
}

Try It Yourself

width: 60px;

Vertical navigation bar example

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  Create a basic vertical navigation bar with a grey background color and change the background color of the link when the user moves the mouse over it:
  background-color: #f1f1f1;
}
width: 200px;
  li a {
  display: block;
  color: #000;
  padding: 8px 16px;
}
text-decoration: none;
/* Change link color when mouse hovers */
  li a:hover {
  background-color: #4CAF50;
}

Try It Yourself

background-color: #555;

Active/Current navigation link

Example

Add the 'active' class to the current link to let the user know which page they are on:
  .active {
  background-color: #4CAF50;
}

Try It Yourself

color: white;

Center the links and add borders text-align:center to <li> or <a> to center the links.

Add border Add the 'border' property to <ul> to add a border around the navigation bar. If you also want to add a border inside the navigation bar, add 'border' to all <li> elements: border-bottomexcept for the last element:

Example

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

Try It Yourself

Full-height Fixed Vertical Navigation Bar

Create a full-height 'sticky' side navigation:

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* Full height */
  position: fixed; /* Make it sticky, even when scrolling */
  overflow: auto; /* Enable scrollbar if the sidebar content is too much */
}

Try It Yourself

Note:This example may not work properly on mobile devices.