HTML Template with Navbar 2026

The Exact Navbar Code — Copy & Use

This is the navbar pattern used in every UIXDraft template — sticky, responsive, with mobile toggle:

/* ── CSS ────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 99;
  display: flex; align-items: center; gap: 24px;
  padding: 16px 24px;
  background: rgba(6,8,15,.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.nav-links { display: flex; gap: 20px; list-style: none; }
.nav-cta { margin-left: auto; background: #7c3aed;
  color: #fff; padding: 8px 18px; border-radius: 8px; }
.hamburger { display: none; }

/* Mobile */
@media (max-width: 768px) {
  .nav-links { display: none; flex-direction: column;
    position: fixed; inset: 60px 0 0 0; background: #06080f;
    padding: 24px; }
  .nav-links.open { display: flex; }
  .hamburger { display: block; margin-left: auto;
    background: none; border: none; color: #fff; font-size: 24px; }
}

Navbar Types — Which to Use

Sticky Navbar

Best for: Most Websites

Stays at top as user scrolls. The CTA button stays visible at all times — highest conversion impact. Use position:sticky;top:0 with backdrop blur.

Transparent Hero Navbar

Best for: Photography, Travel

Transparent over hero image, becomes solid on scroll. Requires a small JS scroll listener. Looks premium on image-heavy landing pages.

Sidebar Nav

Best for: Dashboards, Docs

Fixed left sidebar for app-style navigation. Hidden on mobile with a hamburger toggle. Use for admin dashboards and documentation sites with 20+ nav items.

Minimal Logo-Only

Best for: Landing Pages

Logo left, single CTA right. No nav links — removes escape routes and focuses visitors on the conversion action. Highest conversion rate for single-purpose landing pages.

Navbar Best Practices

Maximum 5–6 nav items — more choices create decision paralysis
CTA button on the far right — high-visibility position for primary action
Logo links to homepage — this is a web convention; don't break it
Mobile hamburger at 768px breakpoint — most mobile views are 375–430px wide
Active page indicator — current page link highlighted (background or underline)
Skip navigation link for accessibility — hidden visually, accessible to screen readers
backdrop-filter:blur() on scroll — prevents content showing through transparent nav

Start the Course — $35 One-Time

Commercial license · No subscription · Instant download · Lifetime updates

Download All 180+ Templates — $35

One payment · Own the files forever · Used by 500+ agencies worldwide

Frequently Asked Questions

How do I add a sticky navbar to an HTML template?

Use CSS: `nav { position: sticky; top: 0; z-index: 99; background: rgba(0,0,0,.9); backdrop-filter: blur(8px); }`. This sticks the navbar to the top as the user scrolls, with a blurred background so content underneath is readable. No JavaScript required for sticky. Add a mobile hamburger toggle with 5 lines of JavaScript for the mobile menu open/close toggle.

How do I make a responsive navbar in HTML?

3-step approach: 1) Desktop: flex layout with logo left, links center, CTA right. 2) Mobile breakpoint (768px): hide links with `display:none`, show hamburger button. 3) JavaScript: toggle a `.open` class on the nav-links when hamburger is clicked. The CSS shows the links as a full-screen overlay when `.open` is present. UIXDraft templates include this pattern pre-built.

What is the best HTML navbar template?

UIXDraft templates include 4 navbar patterns: sticky with blur, transparent-to-solid on scroll, minimal single-CTA, and sidebar navigation for dashboards. All are mobile-responsive with hamburger menus, keyboard accessible, and score 88–97 PageSpeed. Part of the 180+ template pack at $35 one-time.

How do I create a dropdown menu in HTML?

CSS-only dropdown: wrap items in a `.dropdown` div. Style the submenu with `position:absolute; display:none`. Show on hover with `.dropdown:hover .submenu { display:block }`. For accessibility: add `aria-haspopup='true'` and keyboard focus support with `:focus-within`. JavaScript-free dropdowns work in all modern browsers.

How do I make a navbar with a hamburger menu?

HTML: add a `<button class='hamburger' aria-label='Menu'>☰</button>` in the nav. CSS: hide it on desktop (`display:none`), show at mobile breakpoint. JavaScript: `document.querySelector('.hamburger').addEventListener('click', () => document.querySelector('.nav-links').classList.toggle('open'))`. 5 lines of code — no jQuery needed.