Pure CSS Menus
Pure CSS menus are dropdowns, hamburger menus, sidebars and context menus that open and close with CSS only, using :hover, :focus-within or the checkbox technique.
13 free examples, most liked first. Click one to preview it and copy the code.
Sliding Pill Navigation Indicator
by @admin · Menu
Slide-in Off-Canvas Menu
by @admin · Menu
Hamburger To Close Menu
by @admin · Menu
Native Popover Menu
by @admin · Menu
Bottom Tab Bar
by @admin · Menu
Hover Dropdown Menu
by @admin · Menu
Sliding Underline Navigation
by @admin · Menu
Dimming Link List
by @admin · Hover
Expanding Icon Label Bar
by @admin · Hover
Hover Mega Menu
by @admin · Menu
Context Menu Panel
by @admin · Menu
Collapsible Sidebar Group
by @admin · Accordion
Search With Suggestions
by @admin · Layout
Learn how it works
Read the step-by-step guide: How to Build a Dropdown Menu with Pure CSS (No JavaScript)
Menus FAQ
Can a dropdown menu work without JavaScript?
Yes. Use :hover or :focus-within on the parent to show the submenu, or a hidden checkbox as a toggle. The menu examples here use these techniques.
How do I use these pure CSS menus?
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.