W3.CSS Navigation
W3.CSS provide all kinds for navigation bars:
Vertical:
Horizontal (vertical on small screens):
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-16" href="#">Home</a></li>
<li><a class="w3-padding-16" href="#">Link 1</a></li>
<li><a
class="w3-padding-16" href="#">Link 2</a></li>
<li><a class="w3-padding-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:
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.
