navigation

W3.CSS Navigation Bars

Navigation bars are created with the w3-bar class. Additional classes like w3-bar-item are used for links or buttons within the navigation bar.

Basic Navigation Bar

<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">About</a>
  <a href="#" class="w3-bar-item w3-button">Contact</a>
</div>

Navigation Bar with Active State

<div class="w3-bar w3-light-grey">
  <a href="#" class="w3-bar-item w3-button w3-blue">Home</a>
  <a href="#" class="w3-bar-item w3-button">About</a>
  <a href="#" class="w3-bar-item w3-button">Contact</a>
</div>

Responsive Navigation Bar

To make the navigation bar responsive, use the w3-hide-small or w3-hide-medium classes.

<div class="w3-bar w3-light-grey">
  <a href="#" class="w3-bar-item w3-button w3-hide-small">Home</a>
  <a href="#" class="w3-bar-item w3-button w3-hide-small">About</a>
  <a href="#" class="w3-bar-item w3-button">Contact</a>
</div>