Every menu on this page was designed and coded in-house by uiCookies — this is our own pack, not a roundup of CodePen embeds. Each design is a single self-contained HTML file with the CSS inline, and 17 of the 22 use no JavaScript at all.
The pack now opens with the three menus people mean when they search for one: a horizontal navbar with dropdowns, a hamburger drawer, and a mega menu. After those come the rest of the navigation vocabulary — indicators, nested flyouts, breadcrumbs, a footer sitemap, a stepper, a fullscreen overlay, a sticky table of contents, an icon rail, an action sheet and a radial menu — alongside the originals: the account dropdown, admin sidebar, bottom nav, context menu, accordion, dock, file tree and command palette.
Download all 22 (free) Browse live demos
Which menu do you need?
| What you are building | Start with |
|---|---|
| A normal website header | Navbar with Dropdowns (9) |
| That same header on a phone | Hamburger Drawer (10) |
| A large site with many sections | Mega Menu (11) |
| An app sidebar | Admin Sidebar (2) or Icon Rail (20) |
| Tabs within one page | Animated Indicators (12) |
| Filtering a list of results | Pill and Chip Nav (13) |
| Showing where the user is in a hierarchy | Breadcrumbs (15) |
| A checkout or a setup wizard | Step Navigation (17) |
| A long documentation page | Sticky Table of Contents (19) |
| A portfolio or agency site | Fullscreen Overlay (18) |
| Actions on a mobile screen | Bottom Sheet (21) |
| Power-user navigation | Command Palette (8) |
| The site footer | Footer Sitemap (16) |
The three menus most sites need
A site header, its mobile counterpart, and the panel a large site grows into. These three cover the majority of real navigation work.
9. Navbar with Dropdowns
The horizontal navigation bar with dropdowns — the menu most sites actually need, and the one this pack was missing. Submenus open on :focus-within as well as :hover, so the whole thing is reachable from the keyboard without a line of JavaScript. Below 780px the dropdowns stand down and the bar wraps, because a hover menu has no honest equivalent on a touch screen.
10. Hamburger Drawer Menu
The mobile counterpart: a hamburger that morphs into a close mark and slides a drawer in from the right, over a scrim. The whole thing is one checkbox, so the open state persists with no script — and the accessible name sits on the input rather than on the icon-only label, which is the mistake that leaves these menus unnamed.
11. Mega Menu
A full-width panel with three link columns, section headings and a promoted card. The panel is a grid, so a fourth column is one value rather than a rewrite, and it collapses to two columns before it ever has to scroll sideways.
Navigation within a page
Indicators, filters, flyouts, breadcrumbs and progress — the menus that live inside a page rather than above it.
12. Navigation with Animated Indicators
Four ways to mark and animate the current page: a growing underline, a sliding pill, a top bar and a dot. Each is one transform on a pseudo-element, and the current item carries aria-current="page" — the attribute that tells a screen reader which link you are already on, which no amount of styling conveys.
13. Pill and Chip Navigation
Filter navigation: a scrollable pill row with counts that fades at the edge to signal there is more, and a row of removable chips for the filters already applied. The scroller hides its scrollbar without hiding the ability to scroll.
14. Nested Flyout Menu
Submenus that open sideways, three levels deep, with each parent staying highlighted the whole way down. On a narrow screen the flyouts drop below their parent and indent instead of running off the edge — the fix most nested menus never get.
15. Breadcrumb Navigation
Chevron, slash and filled-trail treatments, plus the one nobody ships: a long path that collapses its middle into an expandable ellipsis rather than wrapping onto two lines. Each is an ordered list inside a labelled <nav>, which is what a breadcrumb is supposed to be.
16. Footer Sitemap Navigation
The multi-column footer menu, which becomes a set of accordions under 760px instead of a six-screen scroll. The columns are <details> elements forced open above that width, so a single block of markup serves both layouts.
17. Step Navigation
Checkout and wizard progress, horizontal and vertical. Completed steps read as done, the current one carries aria-current="step", and steps ahead are plainly inactive rather than looking clickable and doing nothing.
Overlays, rails and sheets
18. Fullscreen Overlay Menu
The editorial full-screen menu — large type covering the page, items staggering in behind a clip-path wipe that opens from the toggle. One custom property per item sets the stagger, and the whole thing runs on a checkbox.
19. Sticky Table of Contents
The in-page navigation that follows a long article and highlights the section you are in. It uses IntersectionObserver — about ten lines — because this is the one navigation pattern CSS genuinely cannot do yet. Without the script it degrades to a working set of anchor links.
20. Collapsing Icon Rail
The sidebar that lives as a strip of icons and widens to show labels on hover or focus — the shape every admin panel converges on. The labels stay in the DOM, so the links are never unnamed, and the rail widens with a grid column rather than a hard-coded width.
21. Bottom Sheet Menu
The mobile action sheet: slides up from the bottom edge with a drag handle, keeps the destructive action separated by a rule, and ends with a cancel. Checkbox-driven, so it needs no script.
22. Radial Menu
A speed dial that fans its actions out around the trigger. Each item is placed by one rotate-push-rotate transform, so the arc is defined by a single angle per item instead of hand-placed coordinates — change the angles and the fan reshapes itself.
The original eight
The menus this pack started with — the ones that turn up in apps rather than on marketing sites.
1. Account Dropdown Menu
The avatar-triggered dropdown every app needs: grouped actions, keyboard shortcut hints, a separator before the destructive item, and click-outside to close.
2. Admin Sidebar Menu
A dark admin sidebar with labelled groups, an active item carrying an accent spine, and a submenu that accordions open. The admin-panel staple in one file.
3. Mobile Bottom Navigation
A phone-framed bottom nav with five items and a raised center action button. The active tab lifts its icon and shows a top indicator bar.
4. Right-Click Context Menu
A real context menu: right-click the demo area and it opens at the cursor (clamped to the viewport), with shortcuts and a danger action.
5. Accordion Menu
A warm accordion nav built entirely on details/summary — zero JavaScript, native keyboard support, and it works with scripts disabled.
6. Floating Dock Menu
A macOS-style glass dock: icons magnify with a springy transition on hover, tooltips label them, and running apps carry a dot.
7. File Tree Menu
An explorer-style nested tree using details/summary — collapsible folders, modified-file badges, and an active file state. Also JavaScript-free.
8. Command Palette
The ⌘K pattern: a glass palette with grouped commands, shortcut hints, and live filtering as you type. The command list is one array.
Building a menu without JavaScript
Most navigation does not need a script. Four CSS features cover nearly all of it:
:focus-within— the one that makes a hover dropdown keyboard-accessible. Pair every:hoverrule with it and the menu opens when a link inside it receives focus. This single addition is the difference between a decorative menu and a usable one.- The checkbox pattern — a hidden
<input type="checkbox">plus a<label for>gives you a toggle that persists. Put thearia-labelon the input, not the label: an icon-only label passes an empty name to its input, which is how these menus end up unnamed. <details>and<summary>— a real disclosure widget with keyboard support and Escape-to-close already built in. The accordion, footer and breadcrumb overflow here all use it.grid-template-rows: 0fr → 1fr— animates a submenu to its automatic height, whichmax-heightcould only ever approximate.
What CSS still cannot do: react to scroll position (the table of contents), close on an outside click, or position a menu at the pointer. Those five designs use script, and each degrades to something usable without it.
Hover menus and touch screens
A hover dropdown has no equivalent on a phone. There is no hover state, so the first tap either does nothing or navigates to the parent link, and the submenu is unreachable either way. The common workarounds are worse than the problem: making the parent link inert breaks it for mouse users, and a tap-to-open shim reimplements a menu widget badly.
The honest answer is a different component below the breakpoint. Design 9 switches its dropdowns off under 780px and design 10 is what takes over. Design 14 does the same thing at a smaller scale — its sideways flyouts drop below their parent and indent, because 230px of submenu to the right of a 250px menu does not fit on a 380px screen.
Keyboard and screen reader rules
- Wrap navigation in
<nav>with anaria-labelwhen there is more than one on the page — “Main”, “Footer”, “Breadcrumb”. Two unlabelled navs are indistinguishable in a landmark list. - Mark the current item with
aria-current="page"(or"step"in a wizard) and style that attribute rather than a class. - Every submenu trigger must be reachable and openable by keyboard.
:focus-withinhandles it for CSS menus; a scripted menu needs Escape to close and focus returned to the trigger. - Do not use
role="menu"for site navigation. It is for application menus and commits you to arrow-key handling; a list of links in a<nav>is the correct markup and needs none of it. - Give icon-only triggers an accessible name, and put it on the control itself — a hamburger made of three empty elements has no name to inherit.
- Add
scroll-margin-topto anchor targets when a sticky header is present, or every in-page jump hides its own heading.
Using the menus in your project
Download the pack, open the folder for the design you want, and copy its markup along with the rules from the <style> block. Each design is self-contained — nothing depends on the other 21. Swap the demo links for your own, rename the classes if they collide, and the menu is done.
Frequently asked questions
Are these menu templates free?
Yes. All 22 are free for personal and commercial projects, including client work. No attribution required.
Can I build a menu without JavaScript?
Almost always. Seventeen of these 22 are pure CSS, including the navbar dropdowns, the hamburger drawer, the mega menu, the nested flyouts and the fullscreen overlay. Dropdowns use :hover and :focus-within; anything that has to stay open uses a checkbox or a native <details>. Only five need script, and the sticky table of contents is the only one where CSS genuinely cannot do the job yet.
Do hover dropdowns work on phones?
No, and that is not a bug you can style around. A touch screen has no hover, so the first tap either does nothing or follows the parent link. That is why design 9 switches its dropdowns off below 780px and design 10 exists — the mobile answer to a hover menu is a drawer, not a narrower hover menu.
How do I mark the current page in a menu?
Use aria-current="page" on the link, then style [aria-current]. A class alone changes the appearance but tells assistive technology nothing, so a screen-reader user has no way to know which page they are on. Design 12 shows four indicator styles all driven off that one attribute.
Do these replace Bootstrap dropdowns?
They can. Bootstrap’s dropdown needs its JavaScript bundle; these do not, and they use their own class names so nothing collides if you keep Bootstrap loaded for other components. What Bootstrap does give you is click-to-open with outside-click dismissal, which a pure-CSS hover menu cannot — if you need that behaviour, keep Bootstrap’s or use the <details> approach from design 13 in the buttons pack.
How does the right-click context menu work?
It listens for the contextmenu event, cancels the browser default, and positions the menu at the pointer while clamping it inside the viewport so it never opens off-screen. That is design 4.
What is the difference between a nav and a menu in HTML?
A <nav> holds links that navigate — that is what almost everything here is, and a list of links inside a labelled <nav> is the right markup. The ARIA menu role is for application menus that act on the current page, and it commits you to arrow-key navigation and a set of keyboard behaviours. Do not reach for role="menu" on a site header; you inherit the obligations without needing them.
Can I use these in a template I sell?
Yes, in client work and in products you sell. What you cannot do is repackage the pack itself as a menu pack for redistribution.
Download all 22 menu templates (free) Browse live demos
