- 102 CSS Menu
- Table of Contents
- Related Articles
- Author
- Links
- Made with
- About a code
- Menu
- Author
- Links
- Made with
- About a code
- Fullscreen Overlay Navigation Bar
- Author
- Links
- Made with
- About a code
- Three Fancy Link Hover Effects
- Author
- Links
- Made with
- About a code
- Navigation Dotted Hover Effect
- Author
- Links
- Made with
- About a code
- Fullscreen Overlay Navigation Bar
- Author
- Links
- Made with
- About a code
- Context Menu
- Author
- Links
- Made with
- About a code
- Pure CSS Menu
- Author
- Links
- Made with
- About a code
- Neumorphism Context Menu
- Author
- Links
- Made with
- About a code
- Simple Navigation System
- Author
- Links
- Made with
- About a code
- CSS Menu
- Author
- Links
- Made with
- About a code
- Fullscreen Menu Enter
- Author
- Links
- Made with
- About a code
- Context Menu with Feather Icons
- Author
- Links
- Made with
- About a code
- CSS Hamburger Menu
- Author
- Links
- Made with
- About a code
- Text Fill on Hover
- Author
- Links
- Made with
- About a code
- List Item Hower Effect
- Author
- Links
- Made with
- About a code
- CSS-Only Marquee Effect
- Author
- Links
- Made with
- About a code
- CSS Full-Page Navigation
- Author
- Links
- Made with
- About a code
- Randomly Generated CSS Blobby Nav
- Author
- Links
- Made with
- About a code
- Full-Page Navigation
- Author
- Links
- Made with
- About a code
- Pure CSS Full Page Nav
- Author
- Links
- Made with
- About a code
- Fold Out Mobile Menu
- Author
- Links
- Made with
- About a code
- Menu Hover Fill Text
- Author
- Links
- Made with
- About a code
- Menu with Awesome Hover
- Author
- Links
- Made with
- About a code
- CSS Navigation Bar
- Author
- Links
- Made with
- About a code
- Menu Hover Underline
- Author
- Links
- Made with
- About a code
- Apple TV Menu Interface
- Author
- Links
- Made with
- About a code
- CSS Strange Nav
- Author
- Links
- Made with
- About a code
- Navbar with Pure CSS
- Author
- Links
- Made with
- About a code
- Navbar Interaction
- Author
- Links
- Made with
- About a code
- Off Canvas Menu Pure CSS
- Author
- Links
- Made with
- About a code
- Menu Bar CSS
- Author
- Links
- Made with
- About a code
- Vertical Dark Menu with CSS
- Author
- Links
- Made with
- About the code
- Moving Underline Nav Menu
- Author
- Links
- Author
- Links
- Made with
- About the code
- Navigation Menu
- Author
- Links
- Made with
- About the code
- 3D Navbar
- Author
- Links
- Made with
- About the code
- Just Another Menu
- Author
- Links
- Made with
- About the code
- Pure CSS Menu
- Author
- Links
- Made with
- About the code
- CSS Menu Feat. Emoji
- Author
- Links
- Made with
- About the code
- The Menu
- Author
- Links
- Made with
- About the code
- Menu Effect
- Author
- Links
- Made with
- About the code
- CSS-Only Nested Dropdown Navigation
- Full Page Off-Canvas Navigation
- Simple Radial Menu
- Accordion Menu
- Mobile Filter Menu
- Author
- How TO — Hoverable Dropdown
- Dropdown
- Create A Hoverable Dropdown
- Example
- Example Explained
- Example
- Example Explained
- 25 creative CSS menus (creative examples)
- #1 Cool Nav Menu Hover
- #2 Sticky Navigation Menu with Smooth Scrolling
- #3 Pure CSS DropDown Menu
- #4 Accessibility menu
- #5 CSS Menu hover effects
- #6 Icon Menu
- #7 Snap.svg Menu animation
- #8 Standard Nav Bar
- #9 Half-page Menu
- #10 CSS menu transitions
- #11 Vertical Navigation Menu
- #12 Portfolio Icon Nav
- #13 Responsive navigation multilevel
- #14 Nav Menu Design
- #15 Full page drop down – GSAP
- #16 Lavalamp CSS Menu
- #17 Circle Nav
- #18 Magic Line Menu
- #19 Sliding Menu
- #20 Another Circle Menu
- #21 Pure CSS One page vertical navigation
- #22 CSS Menu Concept (Clip-path)
- #23 💪 CSS menu feat. emoji
- #24 Pure CSS Menu Navigation
- #25 Pure CSS Menu
- Conclusion
102 CSS Menu
Collection of free HTML and CSS navigation menu code examples. Update of May 2020 collection. 27 new items.
Table of Contents
Related Articles
Author
Links
Made with
About a code
Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Fullscreen Overlay Navigation Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Three Fancy Link Hover Effects
Transitioning clip-path and pseudo-element transform s to create smooth link hovers.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Navigation Dotted Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Fullscreen Overlay Navigation Bar
Fullscreen overlay navigation bar with html & css neon effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Context Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Pure CSS Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Neumorphism Context Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
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
Author
Links
Made with
About a code
CSS Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Fullscreen Menu Enter
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Context Menu with Feather Icons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
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
Author
Links
Made with
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
Author
Links
Made with
About a code
List Item Hower Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
CSS-Only Marquee Effect
A simple CSS-only marquee effect for a menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
CSS Full-Page Navigation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
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
Author
Links
Made with
About a code
Full-Page Navigation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Pure CSS Full Page Nav
Compatible browsers: Chrome, Edge, Firefox (partial), Opera, Safari
Author
Links
Made with
About a code
Fold Out Mobile Menu
CSS only fold out mobile menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Menu Hover Fill Text
Menu hover fill text ( color + background-clip ).
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Menu with Awesome Hover
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: bootstrap.css, bootstrap-social.css, font-awesome.css
Author
Links
Made with
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
Author
Links
Made with
About a code
Menu Hover Underline
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Apple TV Menu Interface
Compatible browsers: Chrome, Edge, Opera, Safari
Author
Links
Made with
About a code
CSS Strange Nav
Made a strange navigation. CSS only. Let’s Click!
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Navbar with Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Navbar Interaction
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Off Canvas Menu Pure CSS
Off canvas menu pure CSS by using only CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Menu Bar CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Vertical Dark Menu with CSS
Simple vertical dark menu with CSS and icons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Moving Underline Nav Menu
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
Links
Author
Links
Made with
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
Author
Links
Made with
About the code
3D Navbar
3D navbar in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Just Another Menu
Pure CSS floating menu animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Pure CSS Menu
Pure CSS menu drawer with off-click.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
CSS Menu Feat. Emoji
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
The Menu
Table contents style menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Menu Effect
Reverse text color menu effects.
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
Links
Made with
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
Author
How TO — Hoverable Dropdown
Learn how to create a hoverable dropdown menu with CSS.
Dropdown
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:
Create A Hoverable Dropdown
Create a dropdown menu that appears when the user moves the mouse over an element.
Step 1) Add HTML:
Example
Example Explained
Use any element to open the dropdown menu, e.g. a , or
element.
Use a container element (like ) to create the dropdown menu and add the dropdown links inside it.
Wrap a element around the button and the to position the dropdown menu correctly with CSS.
Step 2) Add CSS:
Example
/* Dropdown Button */
.dropbtn background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
>
/* The container — needed to position the dropdown content */
.dropdown position: relative;
display: inline-block;
>
/* Dropdown Content (Hidden by Default) */
.dropdown-content display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>
/* Links inside the dropdown */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>
/* Change color of dropdown links on hover */
.dropdown-content a:hover
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn
Example Explained
We have styled the dropdown button with a background-color, padding, etc.
The .dropdown class uses position:relative , which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute ).
The .dropdown-content class holds the actual dropdown menu. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens).
Instead of using a border, we have used the box-shadow property to make the dropdown menu look like a «card». We also use z-index to place the dropdown in front of other elements.
The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.
25 creative CSS menus (creative examples)
A good user flow contributes enormously to a successful website. The content, positioning and appearance of your menu/navigation should therefore be well thought out. Here you can find some inspiration and examples for your own CSS menu!
Partially in this list are “normal” CSS menus, for a very simple reason: the usability comes first and only then the appearance. Normal menu bars can also look very chic. With the right effects and animations they become a real eye-catcher.
The same of course applies to mobile displays, often called “hamburgers”. I have also compiled a large collection of CSS hamburger menus for you in the linked post.
The pens shown are licensed with MIT. You can find more info about your own use on the Codepen Blog.
#1 Cool Nav Menu Hover
See the Pen Nav Menu Hover by Hans Engebretsen (@hans) on CodePen.
Author: Hans Engebretsen;
Coded in: HTML, CSS (SCSS);
#2 Sticky Navigation Menu with Smooth Scrolling
Author: Praveen Bisht;
Coded in: HTML (Pug), CSS (SCSS), JS (jQuery);
#3 Pure CSS DropDown Menu
Author: Andor Nagy;
Coded in: HTML, CSS;
#4 Accessibility menu
Author: Lee Kiernan;
Coded in: HTML, CSS (SCSS), JS (jQuery);
#5 CSS Menu hover effects
Author: Sarath AR;
Coded in: HTML, CSS;
#6 Icon Menu
See the Pen Nav/Menu Button by Graham Pyne (@gpyne) on CodePen.
Author: Graham Pyne;
Coded in: HTML, CSS;
#7 Snap.svg Menu animation
Author: romagny jerome;
Coded in: HTML, CSS (SCSS), JS (Snap.svg);
#8 Standard Nav Bar
See the Pen Nav Bar by Justin (@nilbog) on CodePen.
Author: Justin;
Coded in: HTML, CSS (SCSS), JS (jQuery);
#9 Half-page Menu
See the Pen menu by mp_graphic (@mp_graphic) on CodePen.
Author: mp_graphic;
Coded in: HTML, CSS, JS (jQuery);
#10 CSS menu transitions
Author: Khaos;
Coded in: HTML, CSS;
#11 Vertical Navigation Menu
Author: Madalin Tudose;
Coded in: HTML, CSS, JS (jQuery);
#12 Portfolio Icon Nav
See the Pen Portfolio by Ridho Ahmad Batubara (@beteer) on CodePen.
Author: Ridho Ahmad Batubara;
Coded in: HTML, CSS, JS (jQuery);
#13 Responsive navigation multilevel
Author: Stéphanie Walter;
Coded in: HTML, CSS (Less), JS (jQuery);
#14 Nav Menu Design
See the Pen Nav Menu Design by Abdullah Al Amin (@billionbd) on CodePen.
Author: Abdullah Al Amin;
Coded in: HTML, CSS, JS;
#15 Full page drop down – GSAP
Author: Rath;
Coded in: HTML, CSS, JS (jQuery, TweenMax.js);
#16 Lavalamp CSS Menu
Author: Patak;
Coded in: HTML, CSS;
#17 Circle Nav
See the Pen Circle Nav by Corey Roth (@coreyroth) on CodePen.
Author: Corey Roth;
Coded in: HTML, CSS (SCSS), JS (jQuery);
#18 Magic Line Menu
Author: Collin Smith;
Coded in: HTML (Pug), CSS (Stylus), JS (jQuery);
#19 Sliding Menu
Author: Florian-Gropp;
Coded in: HTML, CSS, JS;
#20 Another Circle Menu
See the Pen circle menu by Pierre (@Piewe) on CodePen.
Author: Pierre;
Coded in: HTML, CSS, JS;
#21 Pure CSS One page vertical navigation
Author: Hrtzt;
Coded in: HTML (Pug), CSS (Sass), JS;
#22 CSS Menu Concept (Clip-path)
Author: Charlie Marcotte;
Coded in: HTML (Pug), CSS (Sass), JS;
#23 💪 CSS menu feat. emoji
Author: Piotr Galor;
Coded in: HTML, CSS, JS;
#24 Pure CSS Menu Navigation
Author: Izzy Skye;
Coded in: HTML, CSS, JS;
#25 Pure CSS Menu
See the Pen Pure CSS Menu by Karim Khan (@icodefx) on CodePen.
Author: Karim Khan;
Coded in: HTML, CSS, JS;
Conclusion
Did you code your own fancy menu, which should appear in this list? Please let me know! 🙂
Note: All buttons are all published on codepen.io and not by me .
Not enough? Then this could be something for you: