W3.CSS Navigation Bars

Toggle navigation
TUTORIAL HOME
W3.CSS Navigation Bars
❮ Previous Next ❯
Vertical:

Home Link 2 Link 3 Link 4 Link 5
Horizontal:

Home Link 1
 Dropdown
Link 1 Link 2 Link 3

Home Link 1
 Dropdown
Link 1 Link 2 Link 3

Home Link 1
Input
Text
W3.CSS Navigation Bar Classes
W3.CSS provides the following classes for navigation bars:

Class Defines
w3-bar Horizontal container for HTML elements
w3-bar-block Vertical container for HTML elements
w3-bar-item Container bar elements
w3-sidebar Vertical sidebar for HTML elements
w3-mobile Makes any bar element mobile-first responsive
w3-dropdown-hover Hoverable dropdown element
w3-dropdown-click Clickable dropdown element (instead of hover)
Basic Navigation
The w3-bar class is a container for displaying HTML elements horizontally.

The w3-bar-item class defines the container elements.

It is a perfect tool for creating navigation bars:

Home Link 1 Link 2 Link 3
Example
<div class="w3-bar w3-black">
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
»

Responsive Navigation
The w3-mobile class makes any bar elements responsive (horizontal on large screens and vertical on small).

Medium and large screens:

Home Link 1 Link 2
Small screens:

Home Link 1 Link 2
Example
<div class="w3-bar w3-black">
  <a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
  <a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
  <a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
  <a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
»

Colored Navigation Bars
Use a w3-color class to add a color to the navigation bar:

Home Link 1 Link 2 Link 3

Home Link 1 Link 2 Link 3

Home Link 1 Link 2 Link 3
Example
<div class="w3-bar w3-light-grey">
<div class="w3-bar w3-green">
<div class="w3-bar w3-blue">
»
Bordered Navigation Bars
Use a w3-border or w3-card class to add borders around the navigation bar, or to display it as a card:

Home Link 1 Link 2 Link 3

Home Link 1 Link 2 Link 3

Home Link 1 Link 2 Link 3
Example
<div class="w3-bar w3-border w3-light-grey">
<div class="w3-bar w3-border w3-card-4">
»
Active/Current Link
Add a w3-color class to a link to highlight it:

Home Link 1 Link 2 Link 3

Home Link 1 Link 2 Link 3
Example
<div class="w3-bar w3-border w3-light-grey">
  <a href="#" class="w3-bar-item w3-button w3-green">Home</a>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
»

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:

Home Link 1 Link 2 Link 3

Home Link 1 Link 2 Link 3
Example
<div class="w3-bar w3-border w3-light-grey">
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-blue">Link 1</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-teal">Link 2</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-green">Link 3</a>
</div>
»

Right-Aligned Links
Use the w3-right class on a list item to right-align a specific link:

Home Link 1 Link 2 Link 3
Example
<div class="w3-bar w3-border w3-light-grey">
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button w3-green w3-right">Link 3</a>
</div>
»

Navigation Bar Size
Use a w3-size class to change the font-size of the links inside the navbar:

Home Link 1 Link 2 Link 3

Home Link 1 Link 2 Link 3
Example
<div class="w3-bar w3-green w3-large">
<div class="w3-bar w3-green w3-xlarge">
»

Use a w3-padding class to change the padding of each link inside the navbar:

Home Link 1 Link 2 Link 3

Home Link 1 Link 2 Link 3
Example
<div class="w3-bar w3-border w3-green">
  <a href="#" class="w3-bar-item w3-button w3-padding-16"Home</a>
  <a href="#" class="w3-bar-item w3-button w3-padding-16">Link 1</a>
  <a href="#" class="w3-bar-item w3-button w3-padding-16">Link 2</a>
  <a href="#" class="w3-bar-item w3-button w3-padding-16">Link 3</a>
</div>
»

Note: You can also add padding to the navigation bar, instead of each button. However, if you do this, note that the links do not get full padding on hover:

Home Link 1 Link 2
Example
<div class="w3-bar w3-green w3-padding-16"></div>
»

Customize the width of the links with the CSS width property

(Note: Use w3-mobile to transform the links to 100% width on small screens):

Home Link 1 Link 2

Home Link 1 Home Link 1
Example
<div class="w3-bar w3-dark-grey">
  <a href="#" class="w3-bar-item w3-button w3-mobile w3-green" style="width:33%">Home</a>
  <a href="#" class="w3-bar-item w3-button w3-mobile" style="width:33%">Link 1</a>
  <a href="#" class="w3-bar-item w3-button w3-mobile" style="width:33%">Link 2</a>
</div>
»
Navigation Bar with Icons
Example
<div class="w3-bar w3-light-grey w3-border">
  <a href="#" class="w3-bar-item w3-button w3-green"><i class="fa fa-home"></i></a>
  <a href="#" class="w3-bar-item w3-button"><i class="fa fa-search"></i></a>
  <a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a>
  <a href="#" class="w3-bar-item w3-button"><i class="fa fa-globe"></i></a>
  <a href="#" class="w3-bar-item w3-button"><i class="fa fa-sign-in"></i></a>
</div>
»
The "fa fa" classes in the example above display "Font Awesome" icons.

Learn more about how to display icons in the chapter W3.CSS Icons.

Navigation Bar Text
If you want text instead of buttons inside the navigation bar, use the w3-bar-item  class to get the same padding as the buttons.

Home Link 1 Link 2 Link 3 Text
Example
<div class="w3-bar w3-black">
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
  <span class="w3-bar-item">Text</span>
</div>
»
Navbar with Inputs and Buttons
Home Link 1 Link 2
Search..
Go
Example
<div class="w3-bar w3-light-grey">
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <input type="text" class="w3-bar-item w3-input" placeholder="Search..">
  <a href="#" class="w3-bar-item w3-button w3-green">Go</a>
</div>
»
Navigation Bar with Dropdown
Move the mouse over the "Dropdown" link:

Home Link 1
 Dropdown
Link 1 Link 2 Link 3
Example
<div class="w3-bar w3-light-grey">
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <div class="w3-dropdown-hover">
    <button class="w3-button">Dropdown</button>
    <div class="w3-dropdown-content w3-bar-block w3-card-4">
      <a href="#" class="w3-bar-item w3-button">Link 1</a>
      <a href="#" class="w3-bar-item w3-button">Link 2</a>
      <a href="#" class="w3-bar-item w3-button">Link 3</a>
    </div>
  </div>
</div>
»
Clickable Dropdown
Use w3-dropdown-click if you prefer to click on the dropdown link instead of hover:

Home Link 1
 Dropdown
Link 1 Link 2 Link 3
Example
<div class="w3-dropdown-click">
  <button class="w3-button" onclick="myFunction()">
    Dropdown <i class="fa fa-caret-down"></i>
  </button>
  <div id="demo" class="w3-dropdown-content w3-bar-block w3-card-4">
    <a href="#" class="w3-bar-item w3-button">Link 1</a>
    <a href="#" class="w3-bar-item w3-button">Link 2</a>
    <a href="#" class="w3-bar-item w3-button">Link 3</a>
  </div>
</div>
»
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 bar and add the w3-top or w3-bottom class:

Fixed Top
<div class="w3-top">
  <div class="w3-bar">
    ...
    ...
  </div>
</div>
»

Fixed Bottom
<div class="w3-bottom">
  <div class="w3-bar">
    ...
    ...
  </div>
</div>
»
Vertical Navigation Bar
The w3-bar-block class is a container for displaying HTML elements vertically.

Home Link 1 Link 2 Link 3
Example
<div class="w3-bar-block w3-black">
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
»
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 can use hide and show classes on 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 links in the navigation bar will vertically stack:

Example
»
Side Navigation
The w3-sidebar class creates a side navigation:

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


❮ Previous Next ❯