Interactive demo

Modern CSS navigation menus

Click and resize these patterns — responsive navbar, sticky header, glass bar, dropdown, mega menu, drawer, tabs, breadcrumbs and bottom mobile nav. Full write-up with copy-paste code: blog post.

1. Responsive navbar + hamburger

Resize below ~800px and open the menu. Toggle sets aria-expanded.

2. Sticky header

Scroll inside the box — the bar stays pinned with position: sticky.

StickyNav Start free
Section one — scroll me.
Section two — long landing pages benefit from sticky CTAs.
Section three — keep the sticky bar compact on phones.
Section four — still here.
Section five — end of demo scroll.

3. Minimal underline links

Hover or tab through links for the CSS underline animation.

4. Glassmorphism bar

Blur needs a rich background behind the header.

GlassNav Try demo

6. Mega menu

Hover/focus “Platform” for columns + featured card. Narrow screens use a tap toggle.

MegaNav Explore

7. Slide-in drawer

Open menu → panel slides from the left with a scrim.

8. Tabs & pills

In-page section navigation — not for site-wide routing.

Monthly plans — flexible for small sites.
Yearly plans — two months free in this example copy.
Agency — multi-site billing and white-label notes.

9. Breadcrumbs

Current page uses aria-current="page" and is not a link.

10. Bottom mobile navigation

Typical app-style primary destinations (preview framed in a phone-like area).

Page content sits above the fixed bar. Add bottom padding so the last paragraph is not hidden.

← Back to the full guide · Blog · Home