CSS Navigation Bar

❮ Previous Home Next ❯

Navigation Bars

A navigation bar can be an attractive, interactive feature of Web sites.

Navigation bars, which provide quick and easy access to various sections of a website, are becoming an increasingly popular element of websites.




Navigation Bar Using <nav> Element

The <nav> element is a generic block-level element used to define a broad, generic section of a document.

The <nav> element represents a group of links to other locations either inside or outside of a document.

Links are not restricted to occur solely within <nav> elements.

The intent of this element is that it collects navigation together often as a unit; commonly this would be primary or secondary site navigation or possibly page-related links.

A document may have several <nav> elements.

Example

nav {
  border: 1px solid black;
  padding: 16px;
}



Navigation Bar Using <li> Element

Navigation bars typically have one or several menu items, and their items are contained within <li> elements.

Example

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="/html/index.html">HTML</a></li>
  <li><a href="/css/index.html">CSS</a></li>
  <li><a href="/about/index.html">About</a></li>
  <li><a href="/about/terms-conditions.html">Terms Conditions</a></li>
  <li><a href="/about/privacy-policy.html">Privacy Policy</a></li>
</ul>



Use the list-style-type property to format your lists. Remove the bullets, margins and padding from the list.

Example

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



Horizontal Navigation Bar

You can create a horizontal navigation bar using inline, floating or <a> element.

Inline

You can create a horizontal navigation bar by using the <li> elements as inline.

display: inline; The element generates an inline-level box.

Example

li {
  display: inline;
}

float

You can create a horizontal navigation bar by using the <li> elements as float.

display: block; - The element generates a block-level box.

float: left; - Specifies that the element floats to the left of its container.

Example

li {
  float: left;
}

li a {
  display: block;
  padding: 8px;
  border: 1px solid black;
}

<a> element:

You can create a horizontal navigation bar by using the <nav> as parent element.

Example

nav {
  border: 1px solid black;
  padding: 16px;
}






Vertical Navigation Bar

You can create a vertical navigation bar by using <ul> element.

Example

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

li a {
  display: block;
  padding: 8px;
  border: 1px solid black;
}



Styling Navigation Bar

Horizontal Navigation Bar Examples:

The following example change the link color and background-color on hover and links will be inline:



Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 18px;
  text-decoration: none;
}

/* Change the link color and background-color on hover */
li a:hover {
  background-color: white;
  color: black;
}

Active Navigation Bar Link

You can customize the current link to let the user know which page they're:



Example

.active {
  background-color: #1A73E8;
}

Vertical Navigation Bar

The following example change the link color and background-color on hover and links will be in block:



Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: black;
}

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

/* Change the link color and background-color on hover */
li a:hover {
  background-color: white;
  color: black;
}

Active Vertical Navigation Link

You can customize the current link to let the user know which page they're:



Example

.active {
  background-color: #1A73E8;
}
❮ Previous Home Next ❯