Collection of free HTML and CSS navigation menu code examples. Update of April 2019 collection. 25 new items.
Table of Contents
Related Articles
- CSS Accordion Menus
- CSS Circle Menus
- CSS Dropdown Menus
- CSS Mobile Menus
- CSS Sidebar Menus
- CSS Horizontal Menus
- CSS Fullscreen Menus
- CSS Sliding Menus
- CSS Toggle Menus
- CSS Off-Canvas Menus
Links
Made with
- HTML / CSS (SCSS)
About a code
Text Fill on Hover
Filling the text with a different color on hover - a creative text effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Circle Links
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Full-Page Navigation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Pure CSS Single Page Application
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML (Pug) / CSS (Stylus)
About a code
Randomly Generated CSS Blobby Nav
A randomly generated blobby nav created with CSS. Has smooth anchor scrolling, uses backdrop-filter
, and SVG filter.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Full-Page Navigation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Pure CSS Full Page Nav
Compatible browsers: Chrome, Edge, Firefox (partial), Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Full Page Nav
A concept design of full-page navigation, full of typography, and using icons as large images.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Fold Out Mobile Menu
CSS only fold out mobile menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Menu Hover Fill Text
Menu hover fill text (color
+ background-clip
).
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Drop Down Menu
Smooth drop down menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Menu with Awesome Hover
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css, bootstrap-social.css, font-awesome.css
Links
Made with
- HTML / CSS (SCSS)
About a code
Menu Hover Underline
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Apple TV Menu Interface
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
CSS Strange Nav
Made a strange navigation. CSS only. Let's Click!
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Navigation with Sub-Navigation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Navigation
Click the toggle to open the menu and see the magic. This experiment relies on the only CSS to style, animate and position elements.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Navbar with Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About a code
Navbar Interaction
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Pure CSS Dropdown Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
The Circular Menu
Using border-radius
and clipping paths to create a circular fan like menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Off Canvas Menu Pure CSS
Off canvas menu pure CSS by using only CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Menu Bar CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Vertical Dark Menu with CSS
Simple vertical dark menu with CSS and icons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About a code
The More Menu
Using clip-path
times two to make an irregular shaped object fill out a cut-out shape in an unfold open menu effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Off-Canvas Menu
Pure CSS off-canvas menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Slim) / CSS (SCSS) / JS
About the code
Moving Underline Nav Menu
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About the code
CSS Folding Menu
A simple yet beautiful folding menu made in CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
About the code
Fun Hover Navigation
Fun navigation effect using CSS keyframes. A quick jump back to the old school.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Pure CSS Magic Line Navbar
It's pure CSS. All links need to have a consistent dimensions for this to work. You have to set everything up yourself in terms of telling the nav how many items there are and where the .line
should move to whenever one of the links gets hovered.
Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Circle Menu
nice pure CSS circle menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS)
About the code
Position Sticky Subnav
Sticky subnavigation in pure CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Drop Down Menu
CSS only drop down menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Navigation Menu
Usable as navigation, menu or effect. It uses CSS transform and perspective to create a unique hololens-like animation effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About the code
3D Navbar
3D navbar in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Made with
- HTML / CSS
About the code
Just Another Menu
Pure CSS floating menu animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (Stylus)
About the code
Pure CSS Menu
Pure CSS menu drawer with off-click.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
CSS Menu Feat. Emoji
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
The Menu
Table contents style menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Circle Menu
Pure CSS circle menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML (Pug) / CSS (Stylus)
About the code
Perspective Menus
CSS only perspective menus.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Made with
- HTML / CSS
About the code
Menu Effect
Reverse text color menu effects.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Hover Effect for Horizontal Menu
Pure CSS fading out for siblings menu options on option hover.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML/Haml
- CSS/SCSS
About the code
CSS-Only Nested Dropdown Navigation
CSS only nested dropdown navigation with ARIA.

Full Page Off-Canvas Navigation
An example of how to build a full page navigation that exists off of the screen canvas, sliding into view when clicking the menu option. Added spice with a changing background color depending on navigation item hover.
Made by Caleb Varoga
June 17, 2016

Simple Radial Menu
HTML, CSS, JavaScript simple radial menu with social icons.
Made by Nikolay Talanov
June 13, 2016

Accordion Menu
Simple accordion menu with HTML, CSS and JavaScript.
Made by JuliaRietveld
June 8, 2016

Mobile Filter Menu
Filter menu created by Anton Aheichanka that has been converted into web version.
Made by Arjun Amgain
June 1, 2016

Links
Made with
- HTML/Slim
- CSS/SCSS
- JavaScript (jquery.js)
About the code
Fullscreen Menu Flexbox Style
Chrome and Firefox good... IE bad, no transition support for flex property.

Links
Made with
- HTML
- CSS
- JavaScript
About the code
Dropdown Menu Animation
Nice dropdown menu with animation.

Links
Made with
- HTML
- CSS
- JavaScript
About the code
Mobile Navigation Animation
Mobile navigation open and close animations using GSAP TweenMax and TimelineMax. Still needs some transition tweaking...

Links
Made with
- HTML
- CSS
- JavaScript
About the code
SVG UI Navigation Concept
Just SVG & CSS3 animations, without any animation libraries.

Links
Made with
- HTML/Pug
- CSS/SCSS
- JavaScript (jquery.js)
About the code
Dropdown Menu
Dropdown menu with little jQuery.

Links
Made with
- HTML
- CSS
- JavaScript
About the code
Dropdown
Pretty dropdown menu.

Links
Made with
- HTML
- CSS
- JavaScript (jquery.js)
About the code
SVG Gooey Hover Menu Concept
Uses SVG path manipulation based on mouse position to 'chase' the user's position.

Links
Made with
- HTML
- CSS/SCSS (font-awesome.css)
- JavaScript (jquery.js)
About the code
Sidebar Navigation
Sidebar navigation with tooltips.

Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jquery.js)
About the code
Fullscreen Navigation
Includes a burger with pure CSS animations, fadeIn animations from animate.css, minimal JS.

Header Navigation Menu
Header navigation menu with HTML, CSS and jQuery.
Made by Kyle Lavery
February 4, 2016

Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jquery.js)
About the code
Menu Fullscreen
Menu fullscreen CSS.

Fullscreen Flexbox Overlay Navigation
Fullscreen flexbox overlay navigation in HTML, CSS and jQuery.
Made by Mirko Zorić
January 8, 2016

Links
Made with
- HTML
- CSS
- JavaScript
About the code
Details Info & Navigation
Navigation with jQuery, CSS and HTML.

CSS3 + jQuery Fullscreen Menu
Simple, basic and elegant CSS3 and jQuery driven fullscreen menu.
Made by Anton Petrov
December 5, 2015

Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jQuery.js)
About the code
Full Screen Navigation Overlay
An example of a full screen navigation overlay utilizing flexbox.

Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jquery.js)
About the code
Circular Material Menu
Unusual circular menu.

Semicircular Gooey Menu
Gooey menu with CSS and SVG filters. Version 1.
Made by Lucas Bebber
October 22, 2015

Sliding Navigation Menu
Sliding navigation menu is hidden by default.
Made by Aleh Isakau
October 4, 2015

4 Fullscreen Navigation
4 Fullscreen navigation with HTML, CSS and jQuery.
Made by ari
September 13, 2015

Fullscreen Navigation
CSS hamburger animation taken fromhttp://codepen.io/designcouch/details/Atyop/
Made by Marcus Bizal
September 3, 2015

Links
Made with
- HTML
- CSS
- JavaScript
About the code
Frosty Nav Toggle Effect
HTML, CSS and jQuery frosty navigation toggle effect.

Hamburger Icon With Morphing Menu
Creative menu made with HTML, SASS/CSS3 and JQuery.
Made by Sergio
July 15, 2015

Dropdown Navigation
Dropdown navigation with HTML, CSS and JavaScript
Made by Ryan Morr
July 7, 2015

Full Screen Navigation Using SVG
Full screen navigation using SVG, HTML, CSS and jQuery.
Made by Anas Ashraf
July 2, 2015

Links
Made with
- HTML
- CSS
- JavaScript
About the code
Gooey Mobile Navigation
The cool gooey effect applied to a mobilestyle menu. jQuery and CSS transitions for the animations.

Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jquery.js)
About the code
Fullscreen Navigation
Fullscreen navigation with HTML, CSS and JS.

Colourful Navigation
When you hover the colourful navigation the dot follows your moves to the current item. When you leave it goes back to the active item.
Made by Lewi Hussey
June 4, 2015

Simple JS Mobile Navigation
Simple JS mobile navigation with HTML and CSS.
Made by Kieran Hunter
May 26, 2015

Links
Made with
- HTML
- CSS/SCSS
- JavaScript/Babel (jquery.js)
About the code
Fullscreen Menu
Simple fullscreen menu.

Explosive Menu
A, rather explosive, menu is just a click away. All you have to do is say fire.
Made by Harris Carney
May 17, 2015

Links
Made with
- HTML/Haml
- CSS/SCSS
- JavaScript (jquery.js)
About the code
Off Canvas Nav
Sass off-canvas navigation.

Solution For Long Drop Down Items
Problem with long drop down menus? Well, try this simple solution with the use of JavaScript and jQuery.
Made by Larry Geams Parangan
March 13, 2015

Full-Screen Menu Overlay
A full-screen menu, showcasing your brand and website navigation. Built using SCSS and vanilla JS.
Made by Ettrics
March 12, 2015

Links
Made with
- HTML
- CSS
About the code
CSS Dropdown Menu
Full CSS dropdown navigation. Drops down on click by the use of a hidden checkbox.

Fullscreen Menu
HTML, CSS and jQuery fullscreen menu.
Made by Paul van Oijen
March 6, 2015

Links
Made with
- HTML
- CSS
- JavaScript
About the code
Mobile Menu
HTML, CSS and jQuery effect for mobile menu.

Links
Made with
- HTML
- CSS
- JavaScript (jquery.js)
About the code
Accessible Fullscreen Overlay Menu
A fairly accessible fullscreen overlay menu built with jQuery and CSS.

Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jquery.js)
About the code
Quick And Easy Fullscreen Menu
Crafted and debugged in 5 minutes, IE10+ compatible. Might not be ideal for production but would help you if you need a quick working responsive and modern menu.

Links
Made with
- HTML
- CSS
- JavaScript (jquery.js)
About the code
Full Page Off-Canvas Navigation
An example of how to build a full page navigation that exists off of the screen canvas, sliding into view when clicking the menu option. Added spice with a changing background color depending on navigation item hover.

Offcanvas Sidebar Menu With A Twist
HTML, CSS and jQuery offcanvas sidebar menu with a twist.
Made by Devilish Alchemist
January 13, 2015

Off Canvas Menu
Little off canvas animated menu.
Made by Mark Murray
November 28, 2014

Accordion Drop Down Menu
HTML, CSS accordion menu with jQuery. No plugins.
Made by Agustin Ortiz
November 18, 2014

Flat Vertical Navigation
A simple flat vertical navigation with multi animated drop down menu. Also including Font Awesome and Animate.css.
Made by Andy Tran
November 18, 2014

Links
Made with
- HTML/Pug
- CSS/SCSS
About the code
A Simple Dropdown Menu
Just a simple HTML and CSS dropdown menu.

Material Design Navigation
The page slides to reveal a clean, simple navigation.
Made by Lewi Hussey
October 30, 2014

Triangular Mobile Toggle Navigation
Triangular mobile toggle navigation with HTML and CSS.
Made by MoKev
October 12, 2014

CSS3 Funny Side Menu
A funny CSS3 menu.
Made by Wagner Moschini
September 1, 2014

Links
Made with
- HTML/Haml
- CSS/Less
- JavaScript (jquery.js)
About the code
Flat Horizontal Navigation
A flat horizontal navigation that uses jQuery for a clean dropdown menu alongside with animate.css for the nice flip at the beginning.

Flat Vertical Navigation
A simple flat vertical navigation with a simple dropdown menu.
Made by Andy Tran
September 1, 2014

Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jquery.js)
About the code
Fullscreen Menu
Fullscreen hamburger menu.

Links
Made with
- HTML
- CSS
- JavaScript (bounce.js,
snap.svg)
About the code
Off-Canvas Menu Effects
Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.

Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jquery.js)
About the code
Radial Menu
Animated radial menu.

Toggle Menu
Toggle menu with HTML, CSS and jQuery.
Made by Yoann
July 16, 2014

Links
Made with
- HTML
- CSS
About the code
Pure CSS Transition Effects For Off-Canvas Views
You have probably all seen the "drawer menu/off-canvas" navigation style made popular by Facebook a few years back. There are a lot of great javascript plugins that offers this functionality, but I thought it would be cool to try and do this with the new cool features of css. No javascript required. - Thomas Wilthil

Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jquery.js)
About the code
CSS Off Canvas Menu
Another off canvas menu using the checkbox hack to active mobile navigation.

Side Accordion Menu
HTML, CSS, jQuery sidebar accordion menu.
Made by Benjamin
April 18, 2014

Fixed Flyout/Off-Canvas Navigation
A responsive fixed menu that's always right there.
Made by Colin
April 3, 2014

Links
Made with
- HTML
- CSS
- JavaScript (jquery.js)
About the code
Dropdown Menu
The hover menu is pure CSS. The toggle menu utilizes a minimal amount of JavaScript, but will degrade gracefully because it only uses JavaScript to close the menu when the user clicks outside of the menu.

Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jquery.js)
About the code
Circular Navigation Popout
Full circular animated navigation in CSS. Perfect for mobile. Based on codrops's circular navigation.

Animated Menu
A simple fullscreen menu.
Made by Una Kravets
January 31, 2014

Links
Made with
- HTML
- CSS
About the code
Dropdown Menu UI
Pure CSS dropdown menu.

Links
Made with
- HTML
- CSS
- JavaScript
About the code
Touch Device Jelly Menu Concept
Touch device jelly menu concept with HTML, CSS and JavaScript.

Vertical Accordion Menu Using jQuery And CSS3
A sleek vertical accordion menu for your next website/app. The headings use Font Awesome icon font. CSS3 gradients, transitions, and shadows have been used in the demo along with minimalistic use of jQuery for sliding the link lists.
Made by thecodeplayer

Links
Made with
- HTML
- CSS
- JavaScript
About the code
Circular Links Menu
Responsive circular links menu.
Links
Made with
- HTML / CSS (SCSS)
About the code
Horizontal Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css

Links
Made with
- HTML
- CSS
- JavaScript
About the code
Bounce Mobile Menu
Menu animation with HTML, CSS and jQuery.

Links
Made with
- HTML
- CSS
- JavaScript (classie.js)
About the code
Circular Navigation With CSS
A tutorial on how to create a circular navigation using CSS transforms.

Links
Made with
- HTML/Haml
- CSS/SCSS
- JavaScript (jquery.js)
About the code
Flexbox Off Canvas Menu
Lightweight, simple, easy to use.

Links
Made with
- HTML
- CSS/LESS
- JavaScript (jquery.js)
About the code
Dropdown Menu
This is a simple dropdown menu made using unsorted lists and CSS3 transitions.

Links
Made with
- HTML
- CSS
About the code
Off Canvas Menu with Animated Links
A simple off canvas mobile navigation with delayed link animation. The links have a simple transition effect of fading in from right to left when the navigation is toggled. But the animation occurs in a chained way where the links animate one after the other. This is done by adding a transition-delay to every link.
Mega Menu

About the code
Mega Dropdown
A responsive and easy to customise mega-dropdown component.

Links
Made with
- HTML
- CSS
- JavaScript (jquery.js)
About the code
Responsive Mega Menu
Responsive mega menu for mobile view.

Links
Made with
- HTML
- CSS
- JavaScript (jquery.js)
About the code
Responsive Mega Menu
Responsive mega menu with flexbox.

Links
Made with
- HTML
- CSS
- JavaScript (jquery.js)
About the code
Sexy Flexy Mega Menu
I saw a gif of this style menu on Scout's page on Dribbble and decided to take a shot at it, I thought it was pretty cool to add some subtle animation to the active menu and I also wanted to use flexbox a bit to help lay this out. - Mike Torosian

Links
Made with
- HTML
- CSS
- JavaScript (jquery.js)
About the code
Responsive Mega Menu
Responsive mega menu with blog, images and drop down.

Links
Made with
- HTML
- CSS/SCSS (foundation.css)
- JavaScript (jquery.js, foundation.js)
About the code
Mega Menu Dropdowns with Foundation 5
A mega menu (a big, 2-dimensional drop-down panel) groups navigation options to eliminate scrolling and use typography, icons, and tooltips to explain users’ choices.