W3.CSS — Navigation

Basic Navigation Bar

<div class="w3-bar w3-black">
    <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 Styles

<!-- Top navigation -->
<div class="w3-top">
    <div class="w3-bar w3-black">
        <a href="#" class="w3-bar-item w3-button">Home</a>
        <a href="#" class="w3-bar-item w3-button">About</a>
    </div>
</div>

<!-- Side navigation -->
<div class="w3-sidebar w3-bar-block w3-card" style="width:200px">
    <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 Colors

<!-- Black nav -->
<div class="w3-bar w3-black">
    <a href="#" class="w3-bar-item w3-button">Home</a>
    <a href="#" class="w3-bar-item w3-button">About</a>
</div>

<!-- Blue nav -->
<div class="w3-bar w3-blue">
    <a href="#" class="w3-bar-item w3-button">Home</a>
    <a href="#" class="w3-bar-item w3-button">About</a>
</div>

<!-- Green nav -->
<div class="w3-bar w3-green">
    <a href="#" class="w3-bar-item w3-button">Home</a>
    <a href="#" class="w3-bar-item w3-button">About</a>
</div>

Navigation Examples

<!-- Fixed navigation -->
<div class="w3-top">
    <div class="w3-bar w3-card w3-blue">
        <a href="#" class="w3-bar-item w3-button">Logo</a>
        <a href="#" class="w3-bar-item w3-button w3-right">Login</a>
    </div>
</div>

<!-- Navigation with logo -->
<div class="w3-bar w3-black w3-large">
    <div class="w3-bar-item w3-button w3-green w3-large">MySite</div>
    <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">Services</a>
    <a href="#" class="w3-bar-item w3-button">Contact</a>
</div>

Responsive Navigation

<!-- Mobile navigation -->
<div class="w3-bar w3-black">
    <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 w3-hide-small">Contact</a>
    <a href="#" class="w3-bar-item w3-button w3-right w3-hide-small">Login</a>
    <a href="#" class="w3-bar-item w3-button w3-hide-large w3-hide-medium">☰</a>
</div>

Mini Practice

Create HTML code that:

1. Creates a basic navigation bar
2. Adds a fixed top navigation
3. Creates a side navigation
4. Uses navigation with different colors

Up Next

Next: Learn about W3.CSS Dropdowns.