Bootstrap 4 Sidebar Template

Posted onby admin

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

A simple sidebar template for Bootstrap 4 featuring responsive sidebar navigation. All Start Bootstrap templates are free to download and open source. This snippet is free and open source hence you can use it in your project.Bootstrap 4 Collapsible Toggle Sidebar with navbar snippet example is best for all kind of projects.A great starter for your new awesome project with 1000+ Font Awesome Icons, 4000+ Material Design Icons and Material Design Colors at BBBootstrap.com.

Guys here is the updated code snippet for Angular 11 Bootstrap 5 Sidebar Template: How to make simple sidebar template with Bootstrap 5 and Angular 11? Below you can see working images of Angular bootstrap toggle sidebar navigation menu.

Always Display the Sidebar

Example

<div>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
<div>
... page content ...
</div>
Try It Yourself »

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';
}
Try It Yourself »

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';
}
Try It Yourself »

Collapsible Responsive Side Navigation

Example

<div>
<button
>Close &times;</button>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
<div>
<div>
<button>&#9776;</button>
<div>
<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>
Try It Yourself »Template

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';
}
Bootstrap 4 sidebar template downloadTry It Yourself »

Right-sided Side Navigation

Example

<div>
<h5>Menu</h5>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
<div>
... page content ...
</div>
Try It Yourself »

Right-sided Collapsible Navigation

Example

<div>
<button
>Close &times;</button>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
<div>
<div>
<button>&#9776;</button>
<div>
<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>
Try It Yourself »

Left & Right Side Navigation

Example

Try It Yourself »

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:




Example

Try It Yourself »

Bordered Side Navigation

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

Example

Try It Yourself »

Bootstrap 4 Sidebar Template Free

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

Example

<div>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
Try It Yourself »

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

Example

Try It Yourself »

Hoverable Links

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

Bootstrap 4 Sidebar Template

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

Example

<div>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
Try It Yourself »

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:

Example

<div>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
Try It Yourself »

Side Navigation Sizes

Increased font-size (w3-large etc):

Increased padding (w3-padding etc):

Example

<div>
<a href='#'>Link</a>
<a href='#'>Link</a>
<a href='#'>Link</a>
</div>
Try It Yourself »

Side Navigation with Icons

Bootstrap Side Menu Bar

Example

<div>
<a href='#'><i></i></a>
<a href='#'><i></i></a>
<a href='#'><i></i></a>
<a href='#'><i></i></a>
</div>
Try It Yourself »

Sidebar with Dropdown

Example

<div>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<div>
<button>Dropdown <i></i></button>
<div>
<a href='#'>Link</a>
<a href='#'>Link</a>
</div>
</div>
<a href='#'>Link 3</a>
</div>
Try It Yourself »

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>
<a href='#'>Link 1</a>
<button>Accordion</button>
<div>
<a href='#'>Link</a>
<a href='#'>Link</a>
</div>
<div>
<button>Dropdown</button>
<div>
<a href='#'>Link</a>
<a href='#'>Link</a>
</div>
</div>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>

Animated Sidebar

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

Example

Try It Yourself »

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>
<button>Close</button>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
<!-- Overlay -->
<div></div>
<!-- Page content -->
<button>&#9776;</button>
<div>
<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>
Try It Yourself »

Sidebar Content

Add whatever you like inside the side navigation:

Example

<div>
<div>
<h4>Menu</h4>
</div>
<img src='img_snowtops.jpg'>
<a href='#'>Home</a>
<a href='#'>Projects
<span>8</span>
</a>
<a href='#'>About</a>
<a href='#'>Contact</a>
<div>
<span>X</span>
<p>Lorem ipsum box...</p>
</div>
</div>
Bootstrap side menu barTry It Yourself »

Simple Sidebar

File Size : 213 KB

Side Menu On Hover

HTML, CSS

Fancy Sidebar Navigation

HTML, CSS, JS

Responsive Navigation Menu

HTML, CSS

Responsive Sidebar Menu

Template

HTML, CSS, JS

Sidebar Responsive

HTML, CSS, JS

Sidebar Navigation with ScrollSpy

HTML, CSS, JS

Navigation Sidebar with Toggle

HTML, CSS, JS

Responsive Bootstrap Sidebar Navigation

Included Files : JavaScript JS, HTML, CSS

Compatible Browsers : IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

Features :

* Multiple Color Options

* Fully Responsive

* Sticky Sidebar

* Collapsible Mobile Menu