Navbars
Navigation pattern studies
Fully-working, responsive navbars. The first two sets are original re-interpretations of award-style patterns with placeholder brand and links. The Joramco sets below are wired to the real Joramco menu, logo, and brand — every one has working nested submenus, a mobile drawer, and its signature behavior.
40 navbars
Immersive
FWA-style- #1View
Fullscreen WebGL Overlay
Hamburger opens a fullscreen overlay of oversized links.
CanvasFM - #2View
Gooey Morph Toggle
A morphing menu toggle reveals a gooey blob panel.
CSSSVG - #3View
Magnetic Nav Links
A top bar whose links and CTA attract the cursor.
FM - #4View
Radial Arc Menu
A trigger button expands items along an arc.
FM - #5View
Cursor Pill Indicator
A top bar with a sliding pill behind the links.
FM - #6View
Split Reveal Overlay
Hamburger triggers clip-path panels that split apart.
GSAP - #7View
Distortion Image Menu
An overlay menu with hover image previews.
CanvasFM - #8View
Staggered Fullscreen Links
A fullscreen overlay of large links.
FM - #9View
Marquee Ticker Bar
A nav with a scrolling ticker strip integrated in.
FM - #10View
3D Flip Drawer
A side drawer that rotates in with 3D perspective.
FM
Production
Awwwards-style- #11View
Shrink on Scroll
A full bar that compacts to a slim bar on scroll.
FM - #12View
Hide on Scroll
A nav that hides scrolling down and returns scrolling up.
FM - #13View
Mega Menu Dropdown
A multi-column mega menu of grouped links.
FM - #14View
Centered Logo Split
A centered logo with links balanced left and right.
CSS - #15View
Transparent to Solid
A transparent bar over the hero that solidifies on scroll.
FM - #16View
Hamburger Side Drawer
A clean side drawer behind a dimmed scrim.
FM - #17View
Underline Hover Links
A minimal bar with animated underline links.
CSS - #18View
Floating Glass Pill
A detached, rounded glass pill nav.
CSSFM - #19View
Vertical Sidebar Nav
A fixed vertical icon rail on the side.
FM - #20View
Mobile Bottom Tab
A bottom tab bar on mobile, top bar on desktop.
CSSFM
Joramco · Catalog styles
Joramco-data · Group A- #1View
Mega Menu Dropdown
Top bar; section triggers open multi-column mega panels.
FM - #2View
Hamburger Side Drawer
Right-side drawer with nested accordion submenus.
FM - #3View
Shrink on Scroll
Full bar that compacts to a slim bar past a threshold.
FM - #4View
Hide on Scroll
Nav hides scrolling down and returns scrolling up.
FM - #5View
Centered Logo Split
Centered logo with sections balanced left and right.
FM - #6View
Transparent to Solid
Transparent over the hero, solidifies on scroll.
FM - #7View
Vertical Sidebar Nav
Fixed left rail; sections expand to flyout submenus.
FM - #8View
Underline Hover Links
Minimal bar with animated underline links + dropdowns.
FMCSS - #9View
Floating Glass Pill
Detached blurred glass pill with section dropdowns.
FMCSS - #10View
Staggered Fullscreen Overlay
Fullscreen overlay listing sections with sub-lists.
FM
Joramco · Fresh styles
Joramco-data · Group B- #11View
Full-Width Mega Panel
One trigger opens a full-width panel of section columns.
FM - #12View
Double Bar
Top utility strip (Careers/CSR/Contact) + main nav below.
FM - #13View
Center Logo Mega
Centered logo, sections split L/R with mega dropdowns.
FM - #14View
Sidebar Accordion
Fixed left sidebar with always-visible accordion submenus.
FM - #15View
Fullscreen Index
Hamburger opens a fullscreen index of every section.
FM - #16View
Sticky Pill Mega
Floating pill that expands into a mega menu on open.
FMCSS - #17View
Hover Column Preview
Hovering a section shows its sub-items plus a preview.
FM - #18View
Command Search
Nav with a command-palette search over every page.
FM - #19View
Bottom Dock
Desktop top bar; mobile bottom dock with submenu sheets.
FM - #20View
Tabbed Mega
Top-level items act as tabs revealing a shared mega panel.
FM