W3.CSS Sidebar

Toggle navigation
TUTORIAL HOME
W3.CSS Sidebar
❮ Previous Next ❯
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-2" 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;</a>
  <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" 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-2">
»
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-2" 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>
»

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 w3-white w3-animate-left" style="display:none;z-index:4" 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"></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_fjords.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>
»

❮ Previous Next ❯