25+ CSS Off-Canvas Menus

Hand-picked collection of free 25+ HTML and CSS Off-Canvas menu examples sourced from GitHub and CodePen.

1. Pure CSS Off Canvas Menu

See the Pen
Pure CSS Off Canvas Menu by Saief Al Emon (@iamsaief)
on CodePen.

Author: Saief Al Emon
Source: Code / Demo
Created on: JULY 2, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

2. CSS3 side panel with menu

See the Pen <a href="https://codepen.io/Huskie/pen/DqmPvN"> CSS3 side panel with menu</a> by Darren Huskie (<a href="https://codepen.io/Huskie">@Huskie</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Darren Huskie
Source: Code / Demo
Created on: JUNE 20, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Sass), JavaScript

3. Off-Canvas Menu With CSS and a Touch of JavaScript

See the Pen <a href="https://codepen.io/tutsplus/pen/jYJBEe"> Off-Canvas Menu With CSS and a Touch of JavaScript</a> by Envato Tuts+ (<a href="https://codepen.io/tutsplus">@tutsplus</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Envato Tuts+
Source: Code / Demo
Created on: JANUARY 22, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

4. Pure CSS3 HTML5 sliding panels and off canvas navigation

See the Pen <a href="https://codepen.io/acarignan/pen/rNEQBj"> Pure CSS3 HTML5 sliding panels and off canvas navigation</a> by Adam Carignan (<a href="https://codepen.io/acarignan">@acarignan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Adam Carignan
Source: Code / Demo
Created on: OCTOBER 30, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

5. Off-Canvas

See the Pen <a href="https://codepen.io/pongstr/pen/QWwQab"> Off-Canvas</a> by Pongstr (<a href="https://codepen.io/pongstr">@pongstr</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Pongstr
Source: Code / Demo
Created on: MARCH 13, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

6. Pure CSS off-canvas menu with flexbox

See the Pen <a href="https://codepen.io/zomigi/pen/XWOMrX"> Pure CSS off-canvas menu with flexbox</a> by Zoe Gillenwater (<a href="https://codepen.io/zomigi">@zomigi</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Zoe Gillenwater
Source: Code / Demo
Created on: OCTOBER 2, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

7. Pure CSS Off-Screen Navigation Menu

See the Pen <a href="https://codepen.io/SitePoint/pen/LYQaLV"> Pure CSS Off-Screen Navigation Menu</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: SitePoint
Source: Code / Demo
Created on: JULY 31, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

8. Off-Canvas Menu (final)

See the Pen <a href="https://codepen.io/seyedi/pen/oXwmZg"> Off-Canvas Menu (final)</a> by Mojtaba Seyedi (<a href="https://codepen.io/seyedi">@seyedi</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mojtaba Seyedi
Source: Code / Demo
Created on: JUNE 13, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

9. Offcanvas sidebar menu with a twist

See the Pen <a href="https://codepen.io/devilishalchemist/pen/LERvpM"> Offcanvas sidebar menu with a twist</a> by Devilish Alchemist (<a href="https://codepen.io/devilishalchemist">@devilishalchemist</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Devilish Alchemist
Source: Code / Demo
Created on: DECEMBER 30, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

10. Off-canvas Navigation Variants (Sidebar)

See the Pen <a href="https://codepen.io/foxeisen/pen/YgEwbK"> Off-canvas Navigation Variants (Sidebar)</a> by foxeisen (<a href="https://codepen.io/foxeisen">@foxeisen</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: foxeisen
Source: Code / Demo
Created on: MARCH 12, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript

11. Fly-Out Nav

See the Pen <a href="https://codepen.io/tmrDevelops/pen/RNdKYY"> Fly-Out Nav</a> by Tiffany Rayside (<a href="https://codepen.io/tmrDevelops">@tmrDevelops</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tiffany Rayside
Source: Code / Demo
Created on: MARCH 28, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

12. CSS sidebar toggle

See the Pen <a href="https://codepen.io/CiTA/pen/bgjKKE"> CSS sidebar toggle</a> by Silvestar Bistrović (<a href="https://codepen.io/CiTA">@CiTA</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Silvestar Bistrović
Source: Code / Demo
Created on: FEBRUARY 7, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel)

13. Off Canvas menu with CSS Transitions, Transforms

See the Pen <a href="https://codepen.io/rickzanutta/pen/QwwNEg"> Off Canvas menu with CSS Transitions, Transforms</a> by Riccardo Zanutta (<a href="https://codepen.io/rickzanutta">@rickzanutta</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Riccardo Zanutta
Source: Code / Demo
Created on: NOVEMBER 19, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

14. iOS style sliding menu

See the Pen <a href="https://codepen.io/jasonhowmans/pen/DBdjNM"> iOS style sliding menu</a> by Jason Howmans (<a href="https://codepen.io/jasonhowmans">@jasonhowmans</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jason Howmans
Source: Code / Demo
Created on: JULY 12, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

15. Hidden Side Menu | CSS Only

See the Pen <a href="https://codepen.io/joshuaward/pen/dRJqGx"> Hidden Side Menu | CSS Only</a> by Joshua Ward (<a href="https://codepen.io/joshuaward">@joshuaward</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Joshua Ward
Source: Code / Demo
Created on: JUNE 29, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

16. Portfolio page with animations

See the Pen <a href="https://codepen.io/devellopah/pen/WwKrgX"> Portfolio page with animations</a> by Islam Ibakaev (<a href="https://codepen.io/devellopah">@devellopah</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Islam Ibakaev
Source: Code / Demo
Created on: APRIL 22, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

17. Pure CSS Off-Canvas Menu

See the Pen <a href="https://codepen.io/bombcat/pen/yLMLoK"> Pure CSS Off-Canvas Menu</a> by BOMBCAT (<a href="https://codepen.io/bombcat">@bombcat</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: BOMBCAT
Source: Code / Demo
Created on: MAY 24, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

18. Off canvas menu

See the Pen <a href="https://codepen.io/markmurray/pen/yyNZpz"> Off canvas menu</a> by Mark Murray (<a href="https://codepen.io/markmurray">@markmurray</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mark Murray
Source: Code / Demo
Created on: NOVEMBER 28, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

19. Off-Canvas menu on Pure CSS

See the Pen <a href="https://codepen.io/andrejsharapov/pen/jJXEGq"> Off-Canvas menu on Pure CSS</a> by Andrej Sharapov (<a href="https://codepen.io/andrejsharapov">@andrejsharapov</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andrej Sharapov
Source: Code / Demo
Created on: MARCH 22, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML,(Pug), CSS(SCSS)

20. Another CSS Morphing Menu Toggle

See the Pen <a href="https://codepen.io/poopsplat/pen/ExMemK"> Another CSS Morphing Menu Toggle</a> by Matt Soria (<a href="https://codepen.io/poopsplat">@poopsplat</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Matt Soria
Source: Code / Demo
Created on: OCTOBER 10, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

21. Pure CSS Slide Out Menu

See the Pen <a href="https://codepen.io/james_zedd/pen/ZKVZWp"> Pure CSS Slide Out Menu</a> by James Zedd (<a href="https://codepen.io/james_zedd">@james_zedd</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: James Zedd
Source: Code / Demo
Created on: MAY 23, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

22. Simple Off Canvas Menu with CSS3 Transitions and Translates

See the Pen <a href="https://codepen.io/ncerminara/pen/PoNexN"> Simple Off Canvas Menu with CSS3 Transitions and Translates</a> by Nicholas Cerminara (<a href="https://codepen.io/ncerminara">@ncerminara</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nicholas Cerminara
Source: Code / Demo
Created on: APRIL 17, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

23. JS-Free Menu & Site Navigation

See the Pen <a href="https://codepen.io/udyux/pen/GoPzGB"> JS-Free Menu & Site Navigation</a> by Nicolas Udy (<a href="https://codepen.io/udyux">@udyux</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nicolas Udy
Source: Code / Demo
Created on: FEBRUARY 12, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(PostCSS)

24. Pure CSS OffCanvas Menu

See the Pen <a href="https://codepen.io/phenax/pen/pjeqwm"> Pure CSS OffCanvas Menu</a> by Akshay Nair (<a href="https://codepen.io/phenax">@phenax</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Akshay Nair
Source: Code / Demo
Created on: OCTOBER 4, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

25. The ultimate hamburger menu

See the Pen <a href="https://codepen.io/CharlesSmart/pen/gbdaOa"> The ultimate hamburger menu</a> by Charles (<a href="https://codepen.io/CharlesSmart">@CharlesSmart</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Charles
Source: Code / Demo
Created on: MARCH 6, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

26. Simple jQuery and CSS3 Off-Canvas Menu

See the Pen <a href="https://codepen.io/rugor/pen/OJwaWK"> Simple jQuery and CSS3 Off-Canvas Menu</a> by tryles (<a href="https://codepen.io/rugor">@rugor</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: tryles
Source: Code / Demo
Created on: SEPTEMBER 1, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript