1. Home

W3.CSS Sidebar

With side navigation, you have several options

W3.CSS Vertical Navigation Bars

With side navigation, you have several options:

  • Always display the navigation pane to the left of the page content
  • Use a collapsible, "fully automatic" responsive side navigation
  • Open navigation pane over the left part of the page content
  • Open navigation pane over all of the page content
  • Slide the page content to the right when opening the navigation pane
  • Display the navigation pane on the right side instead of the left side

    • Always Display the Sidebar

    Example

    <div class="w3-sidebar w3-bar-block" style="width:25%">
      <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 style="margin-left:25%">
    ... page content ...
    </div>

    Open the Sidebar Navigation Over a Part of the Content

    Example

    function w3_open() {
      document.getElementById("mySidebar").style.display = "block";
    }

    function w3_close() {
      document.getElementById("mySidebar").style.display = "none";
    }

    Open the Sidebar Navigation Over the Content

    Example

    function w3_open() {
      document.getElementById("mySidebar").style.width = "100%";
      document.getElementById("mySidebar").style.display = "block";
    }

    function w3_close() {
      document.getElementById("mySidebar").style.display = "none";
    }

    Collapsible Responsive Side Navigation

    Example

    <div class="w3-sidebar w3-bar-block w3-collapse w3-card" style="width:200px;" id="mySidebar">
      <button class="w3-bar-item w3-button w3-hide-large"
      onclick="w3_close()">Close &times;</button>
      <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 class="w3-main" style="margin-left:200px">

    <div class="w3-teal">
      <button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">&#9776;</button>
      <div class="w3-container">
        <h1>My Page</h1>
      </div>
      </div>
    </div>

    <script>
    function w3_open() {
      document.getElementById("mySidebar").style.display = "block";
    }

    function w3_close() {
      document.getElementById("mySidebar").style.display = "none";
    }
    </script>

    Slide the Page Content to the Right

    Example

    function w3_open() {
      document.getElementById("main").style.marginLeft = "25%";
      document.getElementById("mySidebar").style.width = "25%";
      document.getElementById("mySidebar").style.display = "block";
      document.getElementById("openNav").style.display = 'none';
    }

    function w3_close() {
      document.getElementById("main").style.marginLeft = "0%";
      document.getElementById("mySidebar").style.display = "none";
      document.getElementById("openNav").style.display = "inline-block";
    }

    Right-sided Side Navigation

    Example

    <div class="w3-sidebar w3-bar-block" style="width:25%;right:0">
      <h5 class="w3-bar-item">Menu</h5>
      <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 style="margin-right:25%">
    ... page content ...
    </div>

    Right-sided Collapsible Navigation

    Example

    <div class="w3-sidebar w3-bar-block w3-collapse" style="width:200px;right:0" id="mySidebar">
      <button class="w3-bar-item w3-button w3-hide-large"
      onclick="w3_close()">Close &times;</button>
      <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 class="w3-main" style="margin-right:200px">
    <div class="w3-teal">
      <button class="w3-button w3-teal w3-xlarge w3-right w3-hide-large" onclick="w3_open()">&#9776;</button>
      <div class="w3-container">
        <h2>My Page</h2>
      </div>
    </div>

    </div>

    <script>
    function w3_open() {
      document.getElementById("mySidebar").style.display = "block";
    }

    function w3_close() {
      document.getElementById("mySidebar").style.display = "none";
    }
    </script>

    Left & Right Side Navigation

    Example

    Styling the Side Navigation

    Add the w3-color class to the w3-sidebar to change the background color. If you want an active/current link, to let the user know which page he/she is on, add the w3-color class to one of the links as well:

    Link 1 Link 2 Link 3 Link 4

    Link 1 Link 2 Link 3 Link 4

    Link 1 Link 2 Link 3 Link 4

    Example

    <div class="w3-sidebar w3-red">

    Bordered Side Navigation

    Use the w3-border class to add a border around the side navigation:

    Link 1 Link 2 Link 3

    Example

    <div class="w3-sidebar w3-border">

    Add the w3-border-bottom class to the links to create link dividers:

    Link 1 Link 2 Link 3

    Example

    <div class="w3-sidebar w3-bar-block">
      <a href="#" class="w3-bar-item w3-button w3-border-bottom">Link 1</a>
      <a href="#" class="w3-bar-item w3-button w3-border-bottom">Link 2</a>
      <a href="#" class="w3-bar-item w3-button">Link 3</a>
    </div>

    Use the w3-card class to display the side navigation as a card:

    Link 1 Link 2 Link 3

    Example

    <nav class="w3-sidebar w3-card">

    Hoverable Links

    When you mouse over the links inside a bar block, the background color will change to grey.

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

    Link 1 Link 2 Link 3 Link 4

    Example

    <div class="w3-sidebar w3-bar-block">
      <a href="#" class="w3-bar-item w3-button w3-hover-black">Link 1</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-green">Link 2</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-blue">Link 3</a>
    </div>

    You can turn off the default hover effect with the w3-hover-none class. This is often used when you only want to highlight text color (and not background color) on hover:

    Link 1 Link 2 Link 3 Link 4

    Example

    <div class="w3-sidebar w3-bar-block">
      <a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-grey">Link 1</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-green">Link 2</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-teal">Link 3</a>
    </div>

    Side Navigation Sizes

    Increased font-size (w3-large etc):

    Link 1 Link 2 Link 3

    Increased padding (w3-padding etc):

    Link 1 Link 2 Link 3

    Example

    <div class="w3-sidebar w3-bar-block w3-large">
      <a href="#" class="w3-bar-item w3-button">Link</a>
      <a href="#" class="w3-bar-item w3-button">Link</a>
      <a href="#" class="w3-bar-item w3-button">Link</a>
    </div>

    Side Navigation with Icons

    Example

    <div class="w3-sidebar w3-bar-block w3-black" style="width:70px">
      <a href="#" class="w3-bar-item w3-button"><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>
    </div>

    Sidebar with Dropdown

    Example

    <div class="w3-sidebar w3-bar-block">
      <a href="#" class="w3-bar-item w3-button">Link 1</a>
      <a href="#" class="w3-bar-item w3-button">Link 2</a>
      <div class="w3-dropdown-hover">
        <button class="w3-button">Dropdown <i class="fa fa-caret-down"></i></button>
        <div class="w3-dropdown-content w3-bar-block">
          <a href="#" class="w3-bar-item w3-button">Link</a>
          <a href="#" class="w3-bar-item w3-button">Link</a>
        </div>
      </div>
    <a href="#" class="w3-bar-item w3-button">Link 3</a>
    </div>
    Tip: 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" <div> and <a>.

    Sidebar with Accordion

    Example

    <div class="w3-sidebar w3-light-grey w3-card" style="width:200px">
      <a href="#" class="w3-bar-item w3-button">Link 1</a>
      <button class="w3-button w3-block w3-left-align" onclick="myAccFunc()">Accordion</button>
      <div id="demoAcc" class="w3-bar-block w3-hide w3-white w3-card-4">
        <a href="#" class="w3-bar-item w3-button">Link</a>
        <a href="#" class="w3-bar-item w3-button">Link</a>
      </div>
      <div class="w3-dropdown-click">
        <button class="w3-button" onclick="myDropFunc()">Dropdown</button>
        <div id="demoDrop" class="w3-dropdown-content w3-bar-block w3-white w3-card-4">
          <a href="#" class="w3-bar-item w3-button">Link</a>
          <a href="#" class="w3-bar-item w3-button">Link</a>
        </div>
      </div>
      <a href="#" class="w3-bar-item w3-button">Link 2</a>
      <a href="#" class="w3-bar-item w3-button">Link 3</a>
    </div>

    Try it Yourself »

    Animated Sidebar

    Use any of the w3-animate-classes to fade, zoom or slide in side navigation:

    Example

    <div class="w3-sidebar w3-animate-left">

    Sidebar Overlay

    The w3-overlay class can be used to create an overlay effect when opening the sidebar. The w3-overlay class adds a black background with a 50% opacity to the "page content" - this effect will "highlight" the side navigation.

    Example

    <!-- Sidebar -->
    <div class="w3-sidebar w3-bar-block" style="display:none;z-index:5" id="mySidebar">
      <button class="w3-bar-item w3-button" onclick="w3_close()">Close</button>
      <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>

    <!-- Overlay -->
    <div class="w3-overlay" onclick="w3_close()" style="cursor:pointer" id="myOverlay"></div>

    <!-- Page content -->
    <button class="w3-button w3-xxlarge" onclick="w3_open()">&#9776;</button>
    <div class="w3-container">
      <h1>Sidebar Overlay</h1>
      <p>Click on the "hamburger" icon to slide in the side navigation.</p>
    </div>

    <!-- JS to open and close sidebar with overlay effect -->
    <script>
    function w3_open() {
      document.getElementById("mySidebar").style.display = "block";
      document.getElementById("myOverlay").style.display = "block";
    }

    function w3_close() {
      document.getElementById("mySidebar").style.display = "none";
      document.getElementById("myOverlay").style.display = "none";
    }
    </script>

    Sidebar Content

    Add whatever you like inside the side navigation:

    Example

    <div class="w3-sidebar w3-bar-block w3-light-grey" style="width:50%">
      <div class="w3-container w3-dark-grey">
        <h4>Menu</h4>
      </div>

      <img src="img_snowtops.jpg">

      <a href="#" class="w3-bar-item w3-button w3-red">Home</a>
      <a href="#" class="w3-bar-item w3-button">Projects
        <span class="w3-tag w3-red w3-round w3-right">8</span>
      </a>
      <a href="#" class="w3-bar-item w3-button">About</a>
      <a href="#" class="w3-bar-item w3-button">Contact</a>

      <div class="w3-panel w3-blue-grey w3-display-container">
        <span class="w3-button w3-display-topright">X</span>
        <p>Lorem ipsum box...</p>
      </div>
     </div>

    Categories

    HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

    Contact US