CSS Navigation Bar

Demonstration: navigation bar

Vertical navigation bar

Horizontal navigation bar


Navigation bar

User-friendly navigation is very important for any website.

By using CSS, you can convert boring HTML menus into beautiful navigation bars.

Navigation bar = list of links

The navigation bar requires standard HTML as the foundation.

In our example, we will use standard HTML lists to build the navigation bar.

The navigation bar is essentially a list of links, so it is meaningful to use <ul> and <li> elements:

Example

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

Try It Yourself

Now, remove the list item, as well as the margin and padding (fill) from the list:

Example

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

Try It Yourself

Example Explanation:

  • list-style-type: none; - Remove the list item. The navigation bar does not need list item markers.
  • Set margin: 0; and padding: 0; Remove the browser's default settings.

The code in the previous example is the standard code used in vertical and horizontal navigation bars, and you will learn more about it in the next chapter.