Collection of free HTML and CSS navigation menu code examples. Update of May 2020 collection. 27 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
About a code
Menu
Menu in pure CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Fullscreen Overlay Navigation Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Three Fancy Link Hover Effects
Transitioning clip-path and pseudo-element transforms to create smooth link hovers.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Navigation Dotted Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Fullscreen Overlay Navigation Bar
Fullscreen overlay navigation bar with html & css neon effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About a code
Context Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Pure CSS Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css
Links
Made with
- HTML / CSS (SCSS)
About a code
Neumorphism Context Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Simple Navigation System
Simple system for navigating a hierarchy in a confined space. Uses standard HTML and CSS, no JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Slim) / CSS (Sass)
About a code
CSS Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS)
About a code
Fullscreen Menu Enter
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Context Menu with Feather Icons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: feather-icons.js
Links
Made with
- HTML / CSS
About a code
CSS Hamburger Menu
Pure CSS menu interaction. Made using the HTML tags details and summary.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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
List Item Hower Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS-Only Marquee Effect
A simple CSS-only marquee effect for a menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
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 (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 (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
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
CSS Navigation Bar
Implemented a minimal navigation bar that changes color on hovering. Written using only HTML and SCSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
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
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
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 (Slim) / CSS (SCSS) / JS
About the code
Moving Underline Nav Menu
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
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 (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: -
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/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/SCSS (font-awesome.css)
- JavaScript (jquery.js)
About the code
Sidebar Navigation
Sidebar navigation with tooltips.
Links
Made with
- HTML / CSS
About a code
Material Design Round Mask Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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
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
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
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
- JavaScript
About the code
Mobile Menu
HTML, CSS and jQuery effect for mobile menu.
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
Material Design Navigation
The page slides to reveal a clean, simple navigation.
Made by Lewi Hussey
October 30, 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
Radial Menu
Animated radial menu.
Toggle Menu
Toggle menu with HTML, CSS and jQuery.
Made by Yoann
July 16, 2014
Side Accordion Menu
HTML, CSS, jQuery sidebar accordion menu.
Made by Benjamin
April 18, 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.
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
Bounce Mobile Menu
Menu animation with HTML, CSS and jQuery.
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.
Mega Menu
Links
Made with
- HTML / CSS
About a code
Stripe Like CSS Only Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -