Collection of over 100 HTML & CSS Navigation Menus with Demos
COLLECTION OF HTML AND CSS MENU WITH LITTLE JAVASCRIPT: ACCORDION, CIRCULAR, DROPDOWN, FULLSCREEN, HORIZONTAL, MOBILE, OFF-CANVAS, SIDE, TOGGLE AND SLIDING. DEMO AND DOWNLOAD CODE (*ZIP).
TABLE OF CONTENTS:
- Accordion Menu
- Circular Menu
- Dropdown Menu
- Fullscreen Menu
- Horizontal Menu
- Mobile Menu
- Off-Canvas Menu
- Side Menu
- Toggle Menu
- Sliding Menu
RELATED COLLECTIONS:
ACCORDION MENU
Demo Image: Slide Accordion Menu
SLIDE ACCORDION MENU
Slide accordion menu with HTML, CSS and JavaScript.
Made by Anya Melnyk
January 9, 2017
Demo Image: Swanky Pure CSS Drop Down Menu
SWANKY PURE CSS DROP DOWN MENU
Pure CSS drop down menu. Nice little addition to any non-javascript user interface. Uses the labels for trick to toggle animations.
Made by Jamie Coulter
April 12, 2016.
Demo Image: Accordion Menu
ACCORDION MENU
Simple accordion menu with HTML, CSS and JavaScript.
Made by JuliaRietveld
June 8, 2016
Demo Image: Accordion Drop Down Menu
ACCORDION DROP DOWN MENU
HTML, CSS accordion menu with jQuery. No plugins.
Made by Agustin Ortiz
November 18, 2014
Demo Image: Side Accordion Menu
SIDE ACCORDION MENU
HTML, CSS, jQuery sidebar accordion menu.
Made by Benjamin
April 18, 2014
Demo Image: Vertical Accordion Menu
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
Demo Image: Only CSS3 Dropdown Menu
ONLY CSS3 DROPDOWN MENU
CSS3 dropdown menu with vibrating effects.
Made by Pedro Nauck
September 1, 2013
Demo Image: Flat Vertical Navigation
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
Demo Image: Flat Vertical Navigation
FLAT VERTICAL NAVIGATION
A simple flat vertical navigation with a simple dropdown menu.
Made by Andy Tran
September 1, 2014
CIRCULAR MENU
Demo Image: Circular Menu
CIRCULAR MENU
Rotating circular menu.
Made by Kostadin
June 14, 2017
Demo Image: Rings Navigation Concept
RINGS NAVIGATION CONCEPT
Links are absolutely positioned on top of each other making several rings.
Made by Bennett Feely
February 15, 2017
Demo Image: Circular Navigation Concept
CIRCULAR NAVIGATION CONCEPT
A new navigation concept with HTML, CSS and JavaScript.
Made by Benedict
November 24, 2016
Demo Image: Simple Radial Menu
SIMPLE RADIAL MENU
HTML, CSS, JavaScript simple radial menu with social icons.
Made by Nikolay Talanov
June 13, 2016
Demo Image: Colourful Flower Popup Menu
COLOURFUL FLOWER POPUP MENU
Mobile inspired flower popup menu. Feel free to use it however you like.
Made by Jordan LaChance
March 22, 2016
Demo Image: Pure CSS 3D Radial Menu
PURE CSS 3D RADIAL MENU
Super radial menu hyper action!
Made by Jamie Coulter
November 16, 2015
Demo Image: Semicircular Gooey Menu
SEMICIRCULAR GOOEY MENU
Gooey menu with CSS and SVG filters. Version 1.
Made by Lucas Bebber
October 22, 2015
Demo Image: Pure CSS Circle Menu
PURE CSS CIRCLE MENU
Circular menu with toggle button created only with css. You can configure the menu size, number of items, color of toggle button and links icons.
Made by Hadar Weiss
June 22, 2015
Demo Image: CSS Radial Menu
CSS RADIAL MENU
Hover the burger to expand radial menu. Only CSS with transitions and transfroms. The radial menu system is responsive according to the viewport height/width.
Made by web-tiki
April 16, 2015
Demo Image: Circular Menu
CIRCULAR MENU
Pure CSS circular menu with hover effect.
Made by Andrew Myers
April 7, 2015
Demo Image: Circular Gooey Menu
CIRCULAR GOOEY MENU
Gooey menu with CSS and SVG filters. Version 2.
Made by Lucas Bebber
January 26, 2015
Demo Image: Radial Menu
RADIAL MENU
HTML and CSS radial menu.
Made by Carlos
July 30, 2014
Demo Image: Animated Radial/Circular Menu
ANIMATED RADIAL/CIRCULAR MENU
A radial menu made with CSS3 and JavaScript.
Made by Creative Punch
April 17, 2014
Demo Image: Pure CSS “Spin-out” Menu
PURE CSS “SPIN-OUT” MENU
Hover the menu and all of it’s items flare out!
Made by Billy Crist
June 28, 2013
Demo Image: Circular Links Menu
CIRCULAR LINKS MENU
Responsive circular links menu.
Made by Rachel Smith
October 24, 2013
DROPDOWN MENU
Demo Image: Simple Pure CSS Dropdown Menu
SIMPLE PURE CSS DROPDOWN MENU
Simple, sleek looking dropdown menu effect achieved using pure CSS. Simple functionality, method can be extended to create a secondary dropdown block with few edits.
Made by Connor Brassington
June 4, 2016
Demo Image: Dropdown Navigation
DROPDOWN NAVIGATION
Dropdown navigation with HTML, CSS and JavaScript
Made by Ryan Morr
July 7, 2015
Demo Image: Solution For Long Drop Down Items
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
Demo Image: Simple Pure Css Dropdown Menu With Following Subnav
SIMPLE PURE CSS DROPDOWN MENU WITH FOLLOWING SUBNAV
Menu with dropdown made only in CSS, with a line that follow the hover on the line.
Made by Robert Borghesi
February 19, 2015
Demo Image: A Simple Dropdown Menu
A SIMPLE DROPDOWN MENU
Just a simple HTML and CSS dropdown menu.
Made by Mike Rojas
November 4, 2014
Demo Image: Dropdown Menu
DROPDOWN MENU
Animated CSS dropdown menu.
Made by Kevin
April 29, 2014
Demo Image: Zigzag Dropdown Menu Concept
ZIGZAG DROPDOWN MENU CONCEPT
This is just another dropdown menu concept.
Made by Catalin Rosu
September 2, 2013
Demo Image: Simple, CSS Only, Responsive Menu
SIMPLE, CSS ONLY, RESPONSIVE MENU
Simple dropdown menu.
Made by John Urbank
July 17, 2013
FULLSCREEN MENU
Demo Image: Mega Menu CSS
MEGA MENU CSS
Menu in CSS & HTML.
Made by theo sije
June 15, 2017
Demo GIF: Another Menu Concept
ANOTHER MENU CONCEPT
One more for the collection, this one includes a custom menu icon and great animation.
Made by Rune Sejer Hoffmann
June 6, 2017
Demo Image: Material Design Menu
MATERIAL DESIGN MENU
Material design inspired ‘growing’ menu? Not sure what to call it to be honest. No jQuery used.
Made by Arjan Jassal
November 14, 2016
Demo Image: Burger Menu. Mobile Optimized. Modal
BURGER MENU. MOBILE OPTIMIZED. MODAL
Modal, mobile optimized burger menu with HTML, CSS and JavaScript.
Made by Christopher Mally
November 1, 2016
Demo Image: Velocity.js Fullscreen Flexbox Overlay Navigation
VELOCITY.JS FULLSCREEN FLEXBOX OVERLAY NAVIGATION
Fullscreen flexbox overlay navigation with velocity.js.
Made by Mirko Zorić
June 20, 2016
Demo Image: Full Page Off-Canvas Navigation
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
Demo Image: Fullscreen Menu Flexbox Method
FULLSCREEN MENU FLEXBOX METHOD
Chrome and Firefox good… IE bad, no transition support for flex property.
Made by Marcus Hall
May 19, 2016
Demo Image: Fullscreen Flexbox Overlay Navigation
FULLSCREEN FLEXBOX OVERLAY NAVIGATION
Fullscreen flexbox overlay navigation in HTML, CSS and jQuery.
Made by Mirko Zorić
January 8, 2016
Demo Image: Pure CSS Fullscreen Navigation Menu
PURE CSS FULLSCREEN NAVIGATION MENU
HTML and CSS fullscreen navigation menu.
Made by Brenden Palmer
December 29, 2015
Demo Image: CSS3 + jQuery Fullscreen Menu
CSS3 + JQUERY FULLSCREEN MENU
Simple, basic and elegant CSS3 and jQuery driven fullscreen menu.
Made by Anton Petrov
December 5, 2015
Demo Image: Fullscreen Navigation
4 FULLSCREEN NAVIGATION
4 Fullscreen navigation with HTML, CSS and jQuery.
Made by ari
September 13, 2015
Demo Image: Fullscreen Navigation
FULLSCREEN NAVIGATION
CSS hamburger animation taken fromhttp://codepen.io/designcouch/details/Atyop/
Made by Marcus Bizal
September 3, 2015
Demo Image: Full Screen Navigation Using SVG
FULL SCREEN NAVIGATION USING SVG
Full screen navigation using SVG, HTML, CSS and jQuery.
Made by Anas Ashraf
July 2, 2015
Demo Image: Explosive 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
Demo Image: Full-Screen Menu Overlay
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
Demo Image: Fullscreen Menu
FULLSCREEN MENU
HTML, CSS and jQuery fullscreen menu.
Made by Paul van Oijen
March 6, 2015
Demo Image: Quick And Easy Fullscreen Menu
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.
Made by Luigi Mannoni
January 31, 2015
Demo Image: Animated Menu
ANIMATED MENU
A simple fullscreen menu.
Made by Una Kravets
January 31, 2014
HORIZONTAL MENU
Demo Image: Lavalamp CSS Menu
LAVALAMP CSS MENU
Lavalamp HTML ans CSS menu.
Made by Irvine Potok
February 22, 2017
Demo Image: Ribbon Navigation
RIBBON NAVIGATION
SVG Ribbon Navigation. Originally built as a quick prototype for some client work. The code could do with being more dynamic.
Made by Steve Gardner
December 15, 2016
Demo Image: A Clean Navigation Slider
A CLEAN NAVIGATION SLIDER
This is a very clean navigation with a cool slider.
Made by Roemerdt
August 20, 2016
Demo Image: Horizontal Icon Navigation
HORIZONTAL ICON NAVIGATION
Simple SVG icon navigation with shadows using flex-box.
Made by Marco Biedermann
June 16, 2016
Demo Image: Colourful Navigation
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
Demo Image: Slide-Menu #2
SLIDE-MENU #2
This is a CSS-only slide menu.
Made by Aaron Benjamin
April 30, 2015
Demo Image: Beautiful Navigation Hover Effects
BEAUTIFUL NAVIGATION HOVER EFFECTS
Beautiful hover effects for horizontal menu.
Made by Dominik Biedebach
April 3, 2015
Demo Image: Horizontal Skewed Menu
HORIZONTAL SKEWED MENU
Using CSS3 properties to make a no-mainstream skewed men.
Made by Claudio Holanda
March 10, 2015
Demo Image: Simple Menu Navigation
SIMPLE MENU NAVIGATION
Just a simple menu with HTML and CSS.
Made by Karim Balaa
January 11, 2015
Demo Image: Transparent Fading Navigation Bar
TRANSPARENT FADING NAVIGATION BAR
Transparent fading navigation bar with mask image.
Made by MrPirrera
August 23, 2014
Demo Image: CSS3 Responsive Menu Effect
CSS3 RESPONSIVE MENU EFFECT
Responsive slide menu effect.
Made by Bogdan Blinnikov
April 15, 2014
MOBILE MENU
Demo Image: Radial Menu Animation
RADIAL MENU ANIMATION
Mobile radial menu animation with HTML, CSS and JavaScript.
Made by Anton Mudrenok
March 30, 2017
Demo Image: Menu With Scroll & Hover Effects
MENU WITH SCROLL & HOVER EFFECTS
Inspired by an app concept created by Sergey Valiukh for the Tubik Studio.
Made by Ivan Bogachev
February 24, 2017
Demo Image: Pure CSS Navigation Simple & Easy
PURE CSS NAVIGATION SIMPLE & EASY
Simple & easy HTML/CSS navigation.
Made by Ravi Dhiman
December 11, 2016
Demo Image: Animated Mobile Navigation
ANIMATED MOBILE NAVIGATION
Animated mobile navigation created in Javascript using Greensock.
Made by Greg Hovanesyan
July 11, 2016
Demo Image: Secret UI Project
SECRET UI PROJECT
Secret UI Project is prototype mockups created by Anton Aheichanka that has been converted into web version.
Made by Mohan Khadka
July 10, 2016
Demo Image: Mobile Filter Menu
MOBILE FILTER MENU
Filter menu created by Anton Aheichanka that has been converted into web version.
Made by Arjun Amgain
June 1, 2016
Demo Image: App Navigation
APP NAVIGATION
Concept for mobile app navigation.
Made by Ian Turner
May 3, 2016
Demo Image: Mobile Navigation Animation
MOBILE NAVIGATION ANIMATION
Mobile navigation open and close animations using GSAP TweenMax and TimelineMax. Still needs some transition tweaking…
Made by Karlo Videk
April 22, 2016
Demo Image: SVG UI Navigation Concept
SVG UI NAVIGATION CONCEPT
Just SVG & CSS3 animations, without any animation libraries.
Made by Alex Permyakov
March 31, 2016
Demo Image: Gooey Mobile Navigation
GOOEY MOBILE NAVIGATION
The cool gooey effect applied to a mobilestyle menu. Jquery and CSS transitions for the animations.
Made by BjurhagerStudios
June 29, 2015
Demo Image: Mobile Navigation
MOBILE NAVIGATION
HTML, CSS and jQuery mobile navigation.
Made by Paul van Oijen
March 16, 2015
Demo Image: Details Info & Navigation
DETAILS INFO & NAVIGATION
Navigation with jQuery, CSS and HTML.
Made by Mohan Khadka
January 4, 2016
Demo Image: Frosty Nav Toggle Effect
FROSTY NAV TOGGLE EFFECT
HTML, CSS and jQuery frosty navigation toggle effect.
Made by Graham Wilsdon
July 22, 2015
Demo Image: Mobile Menu
MOBILE MENU
HTML, CSS and jQuery effect for mobile menu.
Made by Virgil Pana
March 1, 2015
Demo Image: Touch Device Jelly Menu Concept
TOUCH DEVICE JELLY MENU CONCEPT
Touch device jelly menu concept with HTML, CSS and JavaScript.
Made by LegoMushroom
January 10, 2014
Demo Image: Bounce Mobile Menu
BOUNCE MOBILE MENU
Menu animation with HTML, CSS and jQuery.
Made by Matt Hoiland
October 10, 2013
OFF-CANVAS MENU
Demo Image: Off-Canvas Menu Animation With Burger Icon
OFF-CANVAS MENU ANIMATION WITH BURGER ICON
Side menu animation with burger icon with HTML, CSS and jQuery.
Made by Maxime
November 26, 2016
Demo Image: CSS3 Off-Canvas Panel With Menu
CSS3 OFF-CANVAS PANEL WITH MENU
A CSS3 side panel with menu and associated content which transitions in from the right hand side of the page. The whole body of the page moves left to create this effect.
Made by Darren Huskie
August 17, 2016
Demo Image: Offcanvas Sidebar Menu With A Twist
OFFCANVAS SIDEBAR MENU WITH A TWIST
HTML, CSS and jQuery offcanvas sidebar menu with a twist.
Made by Devilish Alchemist
January 13, 2015
Demo Image: Off Canvas Menu
OFF CANVAS MENU
Little off canvas animated menu.
Made by Mark Murray
November 28, 2014
Demo Image: Material Design Navigation
MATERIAL DESIGN NAVIGATION
The page slides to reveal a clean, simple navigation.
Made by Lewi Hussey
October 30, 2014
Demo Image: Pure CSS Off-Screen Navigation Menu
PURE CSS OFF-SCREEN NAVIGATION MENU
Finally, an off-screen menu that doesn’t require a bunch of Javascript to work. This concept relies on the :checked pseudo-selector as well as the general sibling ~ selector, so it has decent browser support.
Made by SitePoint
August 5, 2014
Demo Image: Fixed Flyout/Off-Canvas Navigation
FIXED FLYOUT/OFF-CANVAS NAVIGATION
A responsive fixed menu that’s always right there.
Made by Colin
April 3, 2014
Demo Image: iOS Style Sliding Menu
IOS STYLE SLIDING MENU
Here’s an easy way to create an iOS style, side sliding menu.
Made by Jason Howmans
July 12, 2013
SIDE MENU
Demo Image: Fixed Side Drawer Navigation
FIXED SIDE DRAWER NAVIGATION
Fixed side drawer navigation, that expands on hover. (Treehouse inspired).
Made by Vince Brown
April 13, 2015
Demo Image: Fully Responsive CSS3 Menu
FULLY RESPONSIVE CSS3 MENU
A fully responsive menu without any need of JavaScript and using less than 200 lines of functional CSS code.
Made by Claudio Holanda
March 19, 2015
Demo Image: Side Sliding Menu CSS
SIDE SLIDING MENU CSS
CSS side sliding menu with scroll, no JS were used.
Made by Eduard L.
March 10, 2015
Demo Image: 3D Rotating Side Navigation
3D ROTATING SIDE NAVIGATION
A vertical navigation bar that switches from an icon to text with a cool animation. HTML5 and CSS3.
Made by Arjan Jassal
October 28, 2014
Demo Image: CSS3 Funny Side Menu
CSS3 FUNNY SIDE MENU
A funny CSS3 menu.
Made by Wagner Moschini
September 1, 2014
Demo Image: Vertical Dropdown Menu With Animation
VERTICAL DROPDOWN MENU WITH ANIMATION
Vertical pure CSS3 mega dropdown menu with animation.
Made by Rizky Kurniawan Ritonga
April 2, 2014
Demo Image: Sidebar Menu Hover Show/Hide CSS
SIDEBAR MENU HOVER SHOW/HIDE CSS
Sidebar menu hover show/hide with just CSS.
Made by JFarrow
February 12, 2014
Demo Image: Fixed Side Nav Hover Effect
FIXED SIDE NAV HOVER EFFECT
Testing out a new design concept with a pseudo element hover effect using css-transitions.
Made by Terence Devine
August 13, 2013
TOGGLE MENU
Demo Image: Dropdown Menu
DROPDOWN MENU
Nice dropdown menu in HTML, CSS and JavaScript.
Made by Lukasz
June 16, 2017
Demo Image: Fancy Toggle Menu
FANCY TOGGLE MENU
A fancy toggle menu to edit quickly posts on websites.
Made by Florian Guiffrey
June 14, 2017
Demo GIF: NavMenu
NAVMENU
Expandble/collapsable navigation menu.
Made by Mitchell Swaffield
June 12, 2017
Demo Image: Hidden Menu
HIDDEN MENU
Hidden menu (CSS & HTML5).
Made by José Reyes González
December 8, 2016
Demo Image: Vertical Layout With Toggle Navigation
VERTICAL LAYOUT WITH TOGGLE NAVIGATION
Vertical scrolling sections of content with mobile hamburger navigation. Animations easily customized.
Made by Ettrics
October 8, 2016
Demo Image: Toggle Menu
TOGGLE MENU
Toggle menu with HTML and CSS.
Made by Jeplaa
June 18, 2016
Demo Image: Header Navigation Menu
HEADER NAVIGATION MENU
Header navigation menu with HTML, CSS and jQuery.
Made by Kyle Lavery
February 4, 2016
Demo Image: Pure CSS Toggle Menu
PURE CSS TOGGLE MENU
Its a simple toggle menu for header.
Made by Akshay Nair
August 14, 2015
Demo Image: Hamburger Icon With Morphing Menu
HAMBURGER ICON WITH MORPHING MENU
Creative menu made with HTML, SASS/CSS3 and JQuery.
Made by Sergio
July 15, 2015
Demo Image: Menu Toggle Button With Flat Menu
MENU TOGGLE BUTTON WITH FLAT MENU
Menu toggle button with flat menu. Uses CSS transitions and vanilla JS.
Made by Geoffrey Crofte
June 10, 2015
Demo Image: Simple JS Mobile Navigation
SIMPLE JS MOBILE NAVIGATION
Simple JS mobile navigation with HTML and CSS.
Made by Kieran Hunter
May 26, 2015
Demo Image: CSS Gooey Menu (Version 4)
CSS GOOEY MENU (VERSION 4)
Gooey menu with CSS and SVG filters. Version 4.
Made by Lucas Bebber
January 26, 2015
Demo Image: CSS Gooey Menu (Version 3)
CSS GOOEY MENU (VERSION 3)
Gooey menu with CSS and SVG filters. Version 3.
Made by Lucas Bebber
January 26, 2015
Demo Image: Triangular Mobile Toggle Navigation
TRIANGULAR MOBILE TOGGLE NAVIGATION
Triangular mobile toggle navigation with HTML and CSS.
Made by MoKev
October 12, 2014
Demo Image: Toggle Menu
TOGGLE MENU
Toggle menu with HTML, CSS and jQuery.
Made by Yoann
July 16, 2014
Demo Image: Simple Toggle Nav
SIMPLE TOGGLE NAV
Simple “bubble”-style navigation.
Made by Travis
January 26, 2014
SLIDING MENU
Demo Image: Angled Menu
ANGLED MENU
Angled menu with HTML, CSS and jQuery.
Made by Keith Light
November 25, 2016
Demo Image: Menu Shelf
MENU SHELF
HTML, CSS and JavaScript sliding menu.
Made by Alex Coven
October 29, 2016
Demo Image: Pure CSS Slide Out Menu
PURE CSS SLIDE OUT MENU
A simple slide out menu using just CSS.
Made by Max Kurapov
August 22, 2016
Demo Image: Simple jQuery Slide Menu
SIMPLE JQUERY SLIDE MENU
Very simple jQuery slide menu.
Made by P.S.Blakemore
July 10, 2016
Demo Image: 3D Sliding Navigation
3D SLIDING NAVIGATION
CSS3 3D animated responsive sliding menu.
Made by iamarend
May 11, 2016
Demo Image: Left Slide Menu With Icon
LEFT SLIDE MENU WITH ICON
HTML, CSS and jQuery left slide menu with icon.
Made by Roman
April 2, 2016
Demo Image: Sliding Navigation Menu
SLIDING NAVIGATION MENU
Sliding navigation menu is hidden by default.
Made by Aleh Isakau
October 4, 2015
Demo Image: Multi Level CSS Only Push Menu
MULTI LEVEL CSS ONLY PUSH MENU
Multi level HTML/CSS only push menu.
Made by Shven
June 19, 2014