20+ Collapsable Navbar Examples (CSS, JS, Bootstrap)

Collapsable Navbar – Are you looking for Collapsable Navbar, If yes then in this post I am going to share hand-picked Collapsable Navbar for you. You can use these Collapsable Navbar in your next web based projects.

Collapsable-Navbar

Collapsable Navbar

Following are the list of Collapsable Navbar.

React Collapsable Navbar DEMO

Collapsable navbar templates such as Bootstrap exist but often include a lot of extra stuff that you have to remove if you just want something simpler. This is that something simpler. I wanted to build something extremely simple and easy to modify so that it can be used in anything that just requires a simple navbar that collapses for a mobile screen.


Simple Collapsable Navbar DEMO

Collapsable navbar templates such as Bootstrap exist but often include a lot of extra stuff that you have to remove if you just want something simpler. This is that something simpler. I wanted to build something extremely simple and easy to modify so that it can be used anything that just requires a simple navbar that collapses for a mobile screen.


Pure CSS Responsive Navbar DEMO

A responsive collapsible navbar in pure css



Bootstrap 4 Collapsible Navbar Example DEMO


Collapse Navbar on Scroll DEMO

On Scroll collapse navbar, then fix at top of page


Slideout with Bootstrap 4 DEMO

Replace bootstrap 4 collapsible navbar with a slideout nav. https://slideout.js.org/


v4 Bootstrap Collapsible Navbar + Grid Example DEMO


Bootstrap 4 Collapsible Navbar, without jQuery DEMO



Personal Portfolio DEMO

My Personal Portfolio


Bootstrap Fixed Nav and Scroll Shadow DEMO

This is small pen using bootstrap with collapsing navbar and adding a little box shadow on scroll for nice affect. I threw in a tooltip on the digimouse.


Portfolio DEMO

This site serves to showcase various web development projects and frameworks that I’ve created, and to describe my career goals and aspirations.


Bootstrap 4 – Fixed & collapsed navbar not scrollable fix. DEMO


Bootstrap (v3) Collapsible Navbar and Smooth Scroll Effect DEMO


Bootstrap navbar custom collapse demo DEMO


v3 Bootstrap Collapsible Navbar DEMO



Will McIntosh – Personal Portfolio Project DEMO

Challenge number two of Free Code Camp’s Basic Front End Development Projects: Build a personal portfolio page.


Technical Documentation Page DEMO


Collapsing Navbar (Pure CSS & a bit of JS) DEMO


Personal Porfolio DEMO


Responsive (Side Navbar) & Collapsing Navbar (Pure CSS & bit of JS) DEMO



Bare, simple, pure css collapsible navbar DEMO


Responsive 2-stage collapsed navbar DEMO


Bootstrap 4 Collapsible Navbar DEMO


Flexbox Collapsing Navbar DEMO


I Hope you liked Hand-picked list of Collapsable Navbar, Don’t forget to Subscribe My Public Notebook for more useful Hand-picked HTML and CSS code examples, tutorials and articles.