freeCodeCamp/guide/english/css/navigation-bars/index.md

title

title
Navigation Bars

Navigation Bars

Navigation bars are a very important element to any website. They provide the primary method of navigation by presenting a list of links to a user. There are many methods to creating a navigation bar. The easiest way to create a navigation bar is to use an unordered list and style it with CSS.

Navigation Bars are mostly made up of <ul> lists that are horizontally arranged and styled.

While styling the navigation bars, it's common to remove the extra spacing created by the <ul> and <li> tags as well as the bulletpoints that are automatically inserted:

  list-style-type: none;
  margin: 0px;
  padding: 0px;

Example:

There are two parts to any navigation: the HTML and the CSS. This is just a quick example.

<nav class="myNav">                                 <!-- Any element can be used here -->
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

/* Define the main Navigation block */
.myNav {
  display: block;
  height: 50px;
  line-height: 50px;
  background-color: #333;
}
/* Remove bullets, margin and padding */
.myNav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.myNav li {
  float: left;
  /* Or you can use display: inline; */
}
/* Define the block styling for the links */
.myNav li a {
  display: inline-block;
  text-align: center;
  padding: 14px 16px;
}
/* This is optional, however if you want to display the active link differently apply a background to it */
.myNav li a.active {
  background-color: #3786E1;
}

More Information:

More Navigation Examples: W3Schools