Latest web development tutorials
 

W3.CSS Navigation


W3.CSS provide all kinds for navigation bars:


Basic Navigation

The w3-navbar class creates a horizontal navigation bar:

Example

<ul class="w3-navbar w3-black">
  <li><a href="#">Home</a></li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>
Try It Yourself »

Colored Navigation Bars



Example

<ul class="w3-navbar w3-light-grey">
<ul class="w3-navbar w3-green">
<ul class="w3-navbar w3-blue">
Try It Yourself »

Bordered Navigation Bars



Example

<ul class="w3-navbar w3-border w3-light-grey">
<ul class="w3-navbar w3-border w3-round w3-light-grey">
<ul class="w3-navbar w3-card-8 w3-light-grey">
Try It Yourself »

Active/Current Link


Example

<ul class="w3-navbar w3-border w3-light-grey">
  <li><a class="w3-green" href="#">Home</a></li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>
Try It Yourself »

Hoverable Links

When you mouse over the links inside the navigation bar, the background color will change to grey.

If you want a different background color on hover, use any of the w3-hover-color classes, and if you want a different text color on hover, use any of the w3-hover-text-color classes:


Example

<ul class="w3-navbar w3-border w3-light-grey">
  <li><a class="w3-hover-red" href="#">Home</a></li>
  <li><a class="w3-hover-blue" href="#">Link 1</a></li>
  <li><a class="w3-hover-green" href="#">Link 2</a></li>
  <li><a class="w3-hover-teal" href="#">Link 3</a></li>
</ul>
Try It Yourself »

Right-Aligned Links

Example

<ul class="w3-navbar w3-light-grey w3-border">
  <li><a href="#">Home</a></li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li class="w3-right"><a class="w3-green" href="#">Link 3</a></li>
</ul>
Try It Yourself »

Navigation Bar Size

Change the font size:


Example

<ul class="w3-navbar w3-green w3-large">
<ul class="w3-navbar w3-green w3-xlarge">
Try It Yourself »

Change the padding:


Example

<ul class="w3-navbar w3-green">
  <li><a class="w3-padding-hor-16" href="#">Home</a></li>
  <li><a class="w3-padding-hor-16" href="#">Link 1</a></li>
  <li><a class="w3-padding-hor-16" href="#">Link 2</a></li>
  <li><a class="w3-padding-hor-16" href="#">Link 3</a></li>
</ul>
Try It Yourself »

Customize the width of the list items with the CSS width property (Note: on smaller screens, they will transform to 100%):

Example

<ul class="w3-navbar w3-dark-grey w3-center">
  <li style="width:50%"><a class="w3-padding w3-green" href="#">Home</a></li>
  <li style="width:50%"><a class="w3-padding" href="#">Link 1</a></li>
</ul>
Try It Yourself »

Navigation Bar with Icons

Example

<ul class="w3-navbar w3-light-grey w3-border w3-large">
  <li><a class="w3-green" href="#"><i class="fa fa-home w3-large"></i></a></li>
  <li><a href="#"><i class="fa fa-search w3-large"></i></a></li>
  <li><a href="#"><i class="fa fa-envelope w3-large"></i></a></li>
  <li><a href="#"><i class="fa fa-globe w3-large"></i></a></li>
  <li><a href="#"><i class="fa fa-sign-in w3-large"></i></a></li>
</ul>
Try It Yourself »

Navigation Bar with Dropdown

Move the mouse over the "Dropdown" link:

Example

<ul class="w3-navbar w3-card-2 w3-light-grey">
  <li><a href="#">Home</a></li>
  <li><a href="#">Link 1</a></li>
  <li class="w3-dropdown-hover">
    <a href="#">Dropdown</a>
    <div class="w3-dropdown-content w3-white w3-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>
Try It Yourself »

Note: When the dropdown menu is "open", the dropdown link gets a grey background color to indicate that it is active. To override this, add a w3-hover-color class to both the "dropdown" <li> and <a>:

Tip: If you want a dropdown symbol next to the dropdown text, add a suitable icon (like ):

Example

<li class="w3-dropdown-hover w3-hover-orange">
  <a class="w3-hover-orange" href="#">Dropdown <i class="fa fa-caret-down"></i></a>
  <div class="w3-dropdown-content w3-white w3-card-4">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</li>
Try It Yourself »

Use w3-dropdown-click if you prefer to click on the dropdown link instead of hover:

Example

<li class="w3-dropdown-click">
  <a onclick="myFunction()" href="#">Dropdown <i class="fa fa-caret-down"></i></a>
  <div id="demo" class="w3-dropdown-content w3-white w3-card-4">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</li>
Try It Yourself »

Fixed Navigation Bar

To force the navigation bar to stay at the top or at the bottom of the page, even when the user scrolls the page, wrap a <div> element around the <ul> and add the w3-top or w3-bottom class:

Fixed Top

<div class="w3-top">
  <ul class="w3-navbar">
    ...
  </ul>
</div>
Try it Yourself »

Fixed Bottom

<div class="w3-bottom">
  <ul class="w3-navbar">
    ...
  </ul>
</div>
Try it Yourself »

Collapsing the Navigation Bar

When the navigation bar takes up too much space on a small screen, and you do not want to display it vertically by default, you could use utility classes to hide and show specific links in the navigation bar.

In the example below, the navigation bar is replaced with a button (☰) in the top right corner when shown on tablets and mobile devices. When the button is clicked, the navigation bar will be displayed vertically:


Topnav

Another example of a navigation bar, is the w3-topnav class. It is similar to w3-navbar, except that it will add an underline when you hover over the links, instead of a background color:

Example

<nav class="w3-topnav w3-green">
  <a href="#">Home</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</nav>
Try It Yourself »

Example with Font Awesome Icons

<nav class="w3-topnav w3-green">
  <a href="#"><i class="fa fa-home"></i></a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</nav>
Try It Yourself »

Side Navigation

The w3-sidenav class creates a vertical navigation bar:

Go to the next chapter to learn more about the side navigation.