CSS Reference · 30 Live Demos · 2025

Responsive Navbar HTML CSS — 30 Patterns with Code

Every navigation pattern you need for real projects — basic horizontal nav, hamburger menus, dropdowns, glassmorphism, sticky, bottom tabs and more. Live preview + copy-ready HTML & CSS.

30
Nav Patterns
6
Categories
HTML+CSS
Copy-ready
A11y
Accessible

Frequently Asked Questions

How do I make a responsive navbar in HTML and CSS?

Build a <nav> with a logo and a <ul> of links. On desktop use Flexbox: display:flex; justify-content:space-between; align-items:center. Below 768px, hide the link list (display:none) and show a hamburger button. Toggle a class with JavaScript to reveal the menu on click.

How do I make a sticky navbar in CSS?

Apply position: sticky; top: 0; z-index: 100; to your <nav>. Unlike fixed, sticky keeps the element in document flow until it hits the scroll boundary. Add background and box-shadow so the navbar is visible over scrolled content.

How do I create a CSS-only hamburger menu?

Use a hidden <input type="checkbox"> and a <label> styled as three horizontal lines. When checked, use input:checked ~ .nav-menu { display: flex; } to reveal the menu. No JavaScript needed, though JS is recommended for screen reader aria-expanded states.

How do I add a dropdown to a CSS navbar?

Wrap the nav item and dropdown in a position:relative container. Set the dropdown to position:absolute; top:100%; visibility:hidden; opacity:0. On parent :hover and :focus-within, set visibility:visible; opacity:1. Use transition:opacity .2s for smooth animation.

What z-index should a navbar use?

Use z-index: 100 for a standard sticky navbar — enough to sit above page content. If you have modals (typically z-index 200–400) or tooltips, keep the nav below those values. Remember: z-index only works when position is set to sticky, fixed, relative, or absolute.

More CSS Resources

CSS Button Styles

50 button examples

CSS Grid Examples

35 grid layout patterns

CSS Animations

40 animation demos

Glassmorphism CSS

50 glass effect examples

Free HTML Templates

100 templates by niche

Building a Navbar in HTML & CSS

Sticky headers, hamburger menu
`, code:` `}, {id:8,cat:'mobile',name:'Slide-in Drawer',desc:'Off-canvas menu slides in from the left — app-like experience.', preview:`
${['Home','About','Work','Contact'].map(l=>`${l}`).join('')}
`, code:`
`}, {id:9,cat:'mobile',name:'Full-Screen Mobile Menu',desc:'Menu expands to fill the entire viewport — bold, editorial feel.', preview:`
`, code:` `}, {id:10,cat:'mobile',name:'Bottom Tab Navigation',desc:'Mobile-native bottom bar — apps and mobile-first sites.', preview:`
App content area
`, code:`
`}, {id:11,cat:'mobile',name:'CSS Checkbox Hamburger',desc:'Pure CSS toggle — no JavaScript, works on older browsers.', preview:`
${['Home','About','Contact'].map(l=>`${l}`).join('')}
`, code:` `}, {id:12,cat:'mobile',name:'Animated X Hamburger',desc:'Three bars animate into an × on open — satisfying micro-interaction.', preview:`
Three bars animate into × on click
`, code:` `}, // ── STYLE ────────────────────────────────────────────────────────────────────── {id:13,cat:'style',name:'Glassmorphism Navbar',desc:'Frosted glass effect with backdrop blur — modern dark UIs.', preview:`
`, code:` `}, {id:14,cat:'style',name:'Transparent Hero Navbar',desc:'Transparent over a hero image, gains background on scroll.', preview:`
Hero section
`, code:` `}, {id:15,cat:'style',name:'Pill Links Navbar',desc:'Links styled as pill-shaped buttons — modern SaaS aesthetic.', preview:``, code:` `}, {id:16,cat:'style',name:'Gradient Navbar',desc:'Vibrant gradient background — landing pages and bold brands.', preview:``, code:` `}, {id:17,cat:'style',name:'Light Mode Navbar',desc:'Clean white navbar — ideal for light-themed sites and blogs.', preview:``, code:` `}, {id:18,cat:'style',name:'Bordered Outline Navbar',desc:'Minimal bordered frame — editorial and portfolio sites.', preview:``, code:` `}, // ── DROPDOWN ──────────────────────────────────────────────────────────────────── {id:19,cat:'dropdown',name:'Simple CSS Dropdown',desc:'Hover to reveal a dropdown list — pure CSS, no JavaScript.', preview:``, code:` `}, {id:20,cat:'dropdown',name:'Mega Menu',desc:'Wide multi-column dropdown — e-commerce and large sites.', preview:`
${[['📐 Templates','Ready-made HTML'],['🎨 Components','UI building blocks'],['📖 Docs','Setup guides']].map(([t,d])=>`
${t}
${d}
`).join('')}
`, code:` `}, {id:21,cat:'dropdown',name:'Card Dropdown',desc:'Dropdown with icon cards — rich navigation used by design tools.', preview:`
${[['🎨','UI Kit'],['📐','Templates'],['⚡','Components'],['🔧','Tools']].map(([ic,lb])=>`
${ic}
${lb}
`).join('')}
`, code:`
Products ▾
🎨
UI Kit

Design components

 📐
Templates

Ready-made pages
`}, {id:22,cat:'dropdown',name:'Animated Dropdown Arrow',desc:'Dropdown arrow rotates on open — polished detail.', preview:`
Arrow rotates 180° on dropdown open
`, code:`
    • `}, // ── SPECIAL ──────────────────────────────────────────────────────────────────── {id:23,cat:'special',name:'Vertical Sidebar Nav',desc:'Vertical navigation — dashboards, admin panels and apps.', preview:`
    Main content
    `, code:`
    ...
    `}, {id:24,cat:'special',name:'Breadcrumb Navigation',desc:'Shows the user\'s location in site hierarchy — content and e-commerce.', preview:``, code:` `}, {id:25,cat:'special',name:'Documentation Sidebar',desc:'Nested category + links sidebar — docs sites and wikis.', preview:`
    Docs content
    `, code:` `}, // ── ADVANCED ──────────────────────────────────────────────────────────────────── {id:26,cat:'advanced',name:'Scroll-Shrink Navbar',desc:'Navbar shrinks in height as the user scrolls — saves vertical space.', preview:`
    Navbar height: 72px → 48px on scroll
    `, code:` `}, {id:27,cat:'advanced',name:'Search Bar Navbar',desc:'Expandable search input in the navbar — news and content sites.', preview:``, code:` `}, {id:28,cat:'advanced',name:'Multi-Level Nested Nav',desc:'Two levels of dropdown for deeply hierarchical sites.', preview:``, code:` `}, {id:29,cat:'advanced',name:'ARIA Accessible Navbar',desc:'Full keyboard and screen reader support — use this in production.', preview:`
    aria-label, aria-current="page", aria-expanded, role="list"
    `, code:`
    `}, {id:30,cat:'advanced',name:'Progress-Aware Sticky Nav',desc:'Reading progress bar under the navbar — articles and long-form pages.', preview:`
    Progress bar at 65% — fills as user scrolls the article
    `, code:` `}, ]; // ─── RENDER ─────────────────────────────────────────────────────────────────── const BADGE={basic:'Basic',mobile:'Mobile',style:'Style',dropdown:'Dropdown',special:'Special',advanced:'Advanced'}; function escHtml(s){return s.replace(/&/g,'&').replace(//g,'>');} function buildCard(n){ return `
    ${n.preview}
    #${n.id} ${n.name}
    ${BADGE[n.cat]}

    ${n.desc}

    HTML + CSS 
    ${escHtml(n.code)}
    `; } document.getElementById('grid').innerHTML = NAVS.map(buildCard).join(''); ['basic','mobile','style','dropdown','special','advanced'].forEach(c=>{ const el=document.getElementById('cnt-'+c); if(el) el.textContent=NAVS.filter(n=>n.cat===c).length; }); document.querySelectorAll('.filter-btn').forEach(btn=>{ btn.addEventListener('click',()=>{ document.querySelectorAll('.filter-btn').forEach(b=>b.classList.remove('active')); btn.classList.add('active'); const f=btn.dataset.filter; document.querySelectorAll('.ex-card').forEach(card=>{ card.classList.toggle('hidden',f!=='all'&&card.dataset.cat!==f); }); }); }); function copyCode(btn){ const code=btn.closest('.code-block').querySelector('code').textContent; navigator.clipboard.writeText(code).then(()=>{ btn.textContent='Copied!';btn.classList.add('copied'); setTimeout(()=>{btn.textContent='Copy';btn.classList.remove('copied');},2000); }); } document.querySelectorAll('.faq-q').forEach(q=>q.addEventListener('click',()=>q.parentElement.classList.toggle('open')));