Menus – 22 Free Menu Templates (CSS & Vanilla JS)
Menus is a pack of 22 navigation components, each a single self-contained HTML file with the CSS inline. It covers the three menus most sites need — a horizontal navbar with dropdowns, a hamburger drawer and a mega menu — plus indicators, nested flyouts, breadcrumbs, a footer sitemap, a stepper, a fullscreen overlay, a sticky table of contents, an icon rail, a bottom sheet, a radial menu, and the originals: account dropdown, admin sidebar, mobile bottom nav, context menu, accordion, dock, file tree and command palette.
At a glance
- 22 designs, one folder each, single
index.htmlper design - 17 of the 22 need no JavaScript — dropdowns use
:focus-within, toggles use a checkbox or a native<details> - Current items marked with
aria-current; each<nav>carries a label - Icon-only triggers name the control itself, not the label — the mistake that leaves hamburger menus unnamed
- Hover dropdowns stand down below 780px, where a drawer takes over
- Every design checked at 380px for horizontal overflow
How to use
Open the design you want, copy its markup and the rules from the <style> block, and swap the demo links for your own. Each design is self-contained — nothing depends on the other 21.
FAQ
Are these menu templates free?
Yes — free for personal and commercial projects, including client work.
Do they need a framework?
No. Plain HTML and CSS on their own class names, so they sit alongside Bootstrap or Tailwind without collisions.
