Scroll down to test your sticky navigation
This page is a preview canvas. Edit colours, logo, and settings in the panel on the left — changes update instantly here.
Everything you need, nothing you don't
Designed to work out of the box with any stack — no framework required, zero dependencies.
Blazing fast
Pure vanilla JS. No framework overhead, no build step required.
Fully themeable
CSS custom properties throughout. Drop in your GenCSS tokens and go.
Accessible
ARIA roles, keyboard navigation, skip links, and focus management built in.
Responsive
Drawer and overlay mobile modes. Configurable breakpoint.
Sticky nav
Shrink, hide, and change colour on scroll — all config-driven.
Mega menus
Full-width layouts with columns, images, badges, and custom content.
From config to live nav in seconds
Define your menu structure as a simple JSON object, pass it to the engine, and it handles the rest.
1. Define your structure
Items, dropdowns, mega panels — all expressed as a clean JSON config object.
2. Apply your tokens
Map GenCSS custom properties to menu slots — fonts, colours, spacing, radius.
3. Export & embed
Copy the generated config, drop it into your project alongside menu-engine.js.
4. Ship it
Your nav works in any browser, with any CMS, without touching a build pipeline.
Loved by designers and developers
Built for the Fewd Studio ecosystem — where great design meets clean code.
"Dropped it in, mapped my GenCSS tokens, and had a fully branded sticky mega nav running in under ten minutes. Remarkable."
"The visual builder saves me from having to hand-edit JSON configs. The scroll colour override is exactly what I needed for a transparent header."
"Finally, a nav component that doesn't fight with my design system. The token mapping means it inherits all my brand colours automatically."
"Clean API, great accessibility defaults, and it just works. This is how components should be built."
Ready to build your navigation?
Use the panel on the left to configure your menu, then export the JSON config to drop into your project.