W3.CSS Sidebar
The w3-sidebar Class
The w3-sidebar class creates a vertical side navigation.
A sidebar can stay visible, collapse on small screens, or open over the page content.
Always Display the Sidebar
Use w3-sidebar together with w3-bar-block to create a fixed sidebar.
Give the page content a matching left margin so it does not appear behind 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 and Close a Sidebar
A sidebar can be hidden until the user opens it.
JavaScript can change the display property:
Example
function w3_open() {
sideBar.style.display = "block";
}
function w3_close() {
sideBar.style.display = "none";
}
Collapsible Responsive Sidebar
Use the w3-collapse class to keep the sidebar visible on large screens and collapsible on small screens.
Use the w3-hide-large class to hide items on large screens.
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 X</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-container w3-teal">
<h2><button class="w3-button" onclick="w3_open()">☰</button>My Page</h2>
</div>
... page content ...
</div>
The w3-collapse class is used together with w3-sidebar class
to create a fully automatic responsive side navigation.
For this class to work, the page content must be within a w3-main class.
Sidebar Overlay
Use w3-overlay to darken the page while the sidebar is open.
Example
<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>
</div>
<div class="w3-overlay" onclick="w3_close()" style="cursor:pointer" id="myOverlay"></div>
<button class="w3-button w3-xxlarge" onclick="w3_open()">☰</button>
<script>
const sidebar = document.getElementById("mySidebar");
const overlay = document.getElementById("myOverlay");
function w3_open() {
sidebar.style.display = "block";
overlay.style.display = "block";
}
function w3_close() {
sidebar.style.display = "none";
overlay.style.display = "none";
}
</script>
Right-Sided Sidebar
Add right:0 to position the sidebar on the right side:
Example
<div class="w3-sidebar w3-bar-block" style="width:25%;right:0">
<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>
More Examples
Explore more ways to style and use sidebars.
Slide the Page Content
You can move the page content when the sidebar opens:
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";
}
Styling a Sidebar
Use color classes to change the sidebar background and highlight the current link:
Example
<div class="w3-sidebar w3-bar-block w3-blue">
<a href="#" class="w3-bar-item w3-button w3-green">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
</div>
Bordered Sidebar
Use w3-border around the sidebar and w3-border-bottom between links:
Example
<div class="w3-sidebar w3-bar-block w3-border">
<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>
Hoverable Links
Use a w3-hover-color class to change the background color on hover.
Use w3-hover-none when you only want to change the text color:
Example
<div class="w3-sidebar w3-bar-block w3-black">
<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>
Sidebar with Dropdown
A dropdown can be placed inside a sidebar:
Example
<div class="w3-sidebar w3-bar-block">
<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">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#" class="w3-bar-item w3-button">Link</a>
</div>
</div>
</div>
Sidebar with Accordion
An accordion can also be placed inside a sidebar:
Example
<div class="w3-sidebar w3-bar-block w3-light-grey">
<button class="w3-button w3-block w3-left-align" onclick="myAccFunc()">Accordion</button>
<div id="demoAcc" class="w3-hide">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#" class="w3-bar-item w3-button">Link</a>
</div>
</div>
<script>
function myAccFunc() {
document.getElementById("demoAcc").classList.toggle("w3-show");
}
</script>
Animated Sidebar
Add an animation class such as w3-animate-left to animate a sidebar when it opens:
Sidebar Content
A sidebar can contain any HTML content, including images, headings, buttons, tags, and panels.
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" style="width:100%" alt="Snowy mountains">
<a href="#" class="w3-bar-item w3-button w3-red">Home</a>
<a href="#" class="w3-bar-item w3-button">Projects</a>
<a href="#" class="w3-bar-item w3-button">About</a>
</div>
