W3.CSS Navigation Bars

<!--

main_leaderboard, all: [728,90][970,90][320,50][468,60]

-->

W3.CSS Navigation Bars

❮ Previous
Next ❯

Vertical:

Home
Link 2
Link 3
Link 4
Link 5

Horizontal:

Home
Link 1

Home
Link 1
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

Try It Yourself »

<!--

mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]

-->

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

Try It Yourself »

Colored Navigation Bars

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

Home
Link 1
Link 2
Link 3

Example

Try It Yourself »

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

Example

Try It Yourself »

Active/Current Link

Add a w3-color class to a link to highlight it:

Home
Link 1
Link 2
Link 3

Example

Try It Yourself »

Hoverable Links

When you mouse over a button, the background color will change to grey.

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

Home
Link 1
Link 2
Link 3

Example

Try It Yourself »

If you want to change the text color instead, turn off the default hover effect with the
w3-hover-none class, and add a w3-hover-text class.

Home
Link 1
Link 2
Link 3

Example

<div class="w3-bar w3-border w3-black">
<a href="#"
class="w3-bar-item w3-button">Default</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-hover-none w3-text-grey w3-hover-text-white">Link 2</a>

<a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 3</a>
</div>

Try It Yourself »

Spend some time to play around with different hover effects:

Link 1
Link 2
Link 3

Example

Try It Yourself »

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

Try It Yourself »

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

Example

Try It Yourself »

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

Home
Link 1
Link 2
Link 3

Example

Try It Yourself »

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

Try It Yourself »

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

Try It Yourself »

Navigation Bar with Icons

Example

Try It Yourself »

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

Try It Yourself »

Navbar with Inputs and Buttons

Home
Link 1
Link 2

Example

Try It Yourself »

Navigation Bar with Dropdown

Move the mouse over the "Dropdown" link:

Home
Link 1

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>

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" container and
the button:

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

Home
Link 1

Example

<div class="w3-dropdown-hover
w3-hover-orange">
  <button class="w3-button w3-hover-orange">Dropdown
<i class="fa fa-caret-down"></i></button>
  <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>
</div>

Try It Yourself »

-->

Clickable Dropdown

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

Home
Link 1

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>

Try It Yourself »

Horizontal Dropdown Menu

Remove the w3-bar-block class from the dropdown container if you want the dropdown links to display horizontally instead of vertically:

Home
Link 1

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-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>

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 bar and add the w3-top or w3-bottom class:

Fixed Top

Try it Yourself »

Fixed Bottom

Try it Yourself »

Vertical Navigation Bar

The w3-bar-block class is a container for displaying HTML elements vertically.

Home
Link 1
Link 2
Link 3

Example

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
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

Try It Yourself »

Side Navigation

The w3-sidebar class creates a side navigation:

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

❮ Previous
Next ❯