8 CSS Navbar Designs 02 / 08

CSS Mega Menu

A luxury fashion mega menu navbar UI in deep void black with gold #c9a84c accents and Cormorant Garamond display type — proving a mega menu can carry editorial weight without the SaaS-default look.

Best forluxury fashion e-commerce, boutique storefronts, jewellery sites, perfume houses, premium B2C navigation.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<section class="nb-mga" aria-label="Aurelia luxury mega menu demo">
  <nav aria-label="Primary">
    <div class="nav-inner">
      <a href="#" class="brand">Aur<strong>è</strong>lia</a>
      <ul class="nav-items" role="menubar">
        <li class="nav-item" role="none">
          <button type="button" role="menuitem" aria-haspopup="true">Women <span class="chevron" aria-hidden="true"></span></button>
          <div class="mega mega-women" role="menu">
            <div class="mega-inner">
              <div>
                <p class="mega-col-title">Ready to Wear</p>
                <ul class="mega-links">
                  <li><a href="#" role="menuitem">Coats &amp; Jackets <span>New</span></a></li>
                  <li><a href="#" role="menuitem">Dresses &amp; Skirts</a></li>
                  <li><a href="#" role="menuitem">Trousers &amp; Shorts</a></li>
                  <li><a href="#" role="menuitem">Knitwear &amp; Tops</a></li>
                  <li><a href="#" role="menuitem">Shirts &amp; Blouses</a></li>
                  <li><a href="#" role="menuitem">Jumpsuits</a></li>
                  <li><a href="#" role="menuitem">Swimwear</a></li>
                </ul>
              </div>
              <div>
                <p class="mega-col-title">Accessories</p>
                <ul class="mega-links">
                  <li><a href="#" role="menuitem">Handbags <span>New</span></a></li>
                  <li><a href="#" role="menuitem">Shoes &amp; Boots</a></li>
                  <li><a href="#" role="menuitem">Jewellery</a></li>
                  <li><a href="#" role="menuitem">Scarves &amp; Belts</a></li>
                  <li><a href="#" role="menuitem">Sunglasses</a></li>
                  <li><a href="#" role="menuitem">Watches</a></li>
                </ul>
              </div>
              <div>
                <p class="mega-col-title">By Occasion</p>
                <ul class="mega-links">
                  <li><a href="#" role="menuitem">Evening &amp; Gala</a></li>
                  <li><a href="#" role="menuitem">Resort &amp; Beach</a></li>
                  <li><a href="#" role="menuitem">Business &amp; Smart</a></li>
                  <li><a href="#" role="menuitem">Weekend Casual</a></li>
                  <li><a href="#" role="menuitem">Bridal</a></li>
                </ul>
              </div>
              <div class="mega-editorial">
                <div class="editorial-pattern" aria-hidden="true"></div>
                <p class="editorial-tag">Editorial — SS26</p>
                <p class="editorial-headline">The Art of<br>Understated<br>Power</p>
                <a href="#" class="editorial-cta">Discover →</a>
              </div>
            </div>
          </div>
        </li>

        <li class="nav-item" role="none">
          <button type="button" role="menuitem" aria-haspopup="true">Men <span class="chevron" aria-hidden="true"></span></button>
          <div class="mega mega-men" role="menu">
            <div class="mega-inner">
              <div>
                <p class="mega-col-title">Clothing</p>
                <ul class="mega-links">
                  <li><a href="#" role="menuitem">Suits &amp; Blazers <span>New</span></a></li>
                  <li><a href="#" role="menuitem">Outerwear</a></li>
                  <li><a href="#" role="menuitem">Shirts</a></li>
                  <li><a href="#" role="menuitem">Trousers &amp; Jeans</a></li>
                  <li><a href="#" role="menuitem">Knitwear</a></li>
                  <li><a href="#" role="menuitem">T-Shirts &amp; Polos</a></li>
                </ul>
              </div>
              <div>
                <p class="mega-col-title">Accessories</p>
                <ul class="mega-links">
                  <li><a href="#" role="menuitem">Shoes &amp; Boots</a></li>
                  <li><a href="#" role="menuitem">Bags &amp; Briefcases</a></li>
                  <li><a href="#" role="menuitem">Ties &amp; Cufflinks</a></li>
                  <li><a href="#" role="menuitem">Belts</a></li>
                  <li><a href="#" role="menuitem">Watches</a></li>
                </ul>
              </div>
              <div>
                <p class="mega-col-title">Grooming</p>
                <ul class="mega-links">
                  <li><a href="#" role="menuitem">Skincare</a></li>
                  <li><a href="#" role="menuitem">Fragrance</a></li>
                  <li><a href="#" role="menuitem">Hair</a></li>
                </ul>
              </div>
              <div class="mega-editorial">
                <div class="editorial-pattern" aria-hidden="true"></div>
                <p class="editorial-tag">Lookbook — AW26</p>
                <p class="editorial-headline">New Tailoring<br>Classics</p>
                <a href="#" class="editorial-cta">Explore →</a>
              </div>
            </div>
          </div>
        </li>

        <li class="nav-item" role="none">
          <button type="button" role="menuitem" aria-haspopup="true">Collections <span class="chevron" aria-hidden="true"></span></button>
          <div class="mega mega-collections" role="menu">
            <div class="mega-inner">
              <div class="collection-card">
                <div class="collection-card-accent" aria-hidden="true"></div>
                <p class="collection-season">Spring / Summer 2026</p>
                <p class="collection-name">Lumière<br>Douce</p>
                <p class="collection-desc">Soft light and shadow play through sheer silks and structured linen.</p>
              </div>
              <div class="collection-card">
                <div class="collection-card-accent" aria-hidden="true"></div>
                <p class="collection-season">Pre-Fall 2026</p>
                <p class="collection-name">Nuit<br>Blanche</p>
                <p class="collection-desc">The elegance of the in-between — neither day nor evening.</p>
              </div>
              <div class="collection-card">
                <div class="collection-card-accent" aria-hidden="true"></div>
                <p class="collection-season">Capsule</p>
                <p class="collection-name">Jardin<br>Sauvage</p>
                <p class="collection-desc">Botanically inspired prints on sustainable organic cotton.</p>
              </div>
              <div class="collection-card">
                <div class="collection-card-accent" aria-hidden="true"></div>
                <p class="collection-season">Bridal 2026</p>
                <p class="collection-name">Maison<br>Éternelle</p>
                <p class="collection-desc">Couture-grade craftsmanship for life's most defining moments.</p>
              </div>
            </div>
          </div>
        </li>

        <li class="nav-item" role="none">
          <button type="button" role="menuitem" aria-haspopup="true">Designers <span class="chevron" aria-hidden="true"></span></button>
          <div class="mega mega-designers" role="menu">
            <div class="mega-inner">
              <div>
                <p class="mega-col-title">Featured</p>
                <ul class="mega-links">
                  <li><a href="#" role="menuitem">Valentino</a></li>
                  <li><a href="#" role="menuitem">Bottega Veneta</a></li>
                  <li><a href="#" role="menuitem">The Row</a></li>
                  <li><a href="#" role="menuitem">Alaïa</a></li>
                  <li><a href="#" role="menuitem">Toteme</a></li>
                </ul>
              </div>
              <div>
                <p class="mega-col-title">A–Z Directory</p>
                <div class="designers-grid">
                  <a href="#" class="designer-tile">Acne</a>
                  <a href="#" class="designer-tile">AMI</a>
                  <a href="#" class="designer-tile">Balenciaga</a>
                  <a href="#" class="designer-tile">Celine</a>
                  <a href="#" class="designer-tile">Chloé</a>
                  <a href="#" class="designer-tile">Dior</a>
                  <a href="#" class="designer-tile">Givenchy</a>
                  <a href="#" class="designer-tile">Isabel</a>
                  <a href="#" class="designer-tile">Jacquemus</a>
                  <a href="#" class="designer-tile">Khaite</a>
                  <a href="#" class="designer-tile">Loewe</a>
                  <a href="#" class="designer-tile">Marni</a>
                </div>
              </div>
              <div class="mega-editorial">
                <div class="editorial-pattern" aria-hidden="true"></div>
                <p class="editorial-tag">Interview Series</p>
                <p class="editorial-headline">Voices from<br>the Atelier</p>
                <a href="#" class="editorial-cta">Read interviews →</a>
              </div>
            </div>
          </div>
        </li>

        <li class="nav-item sale-item" role="none"><a href="#" role="menuitem">Sale <span class="sale-flash">UP TO 60%</span></a></li>
      </ul>

      <div class="nav-spacer"></div>

      <div class="nav-utils">
        <button class="util-btn" type="button">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          Search
        </button>
        <button class="util-btn" type="button">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
          Account
        </button>
        <button class="cart-btn" type="button">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M6 2 3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
          Bag
          <span class="cart-count">3</span>
        </button>
      </div>
    </div>
  </nav>

  <div class="page-content">
    <div class="bg-orb bg-orb-1" aria-hidden="true"></div>
    <div class="bg-orb bg-orb-2" aria-hidden="true"></div>
    <p class="page-eyebrow">New Season — SS 2026</p>
    <div class="page-line"></div>
    <h1 class="page-h1">The Art of<br><em>Refinement</em></h1>
    <p class="page-sub">Hover over the navigation to explore our collections. Each category unfolds into a world carefully curated for you.</p>
  </div>
</section>
/* ─── 02 Aurélia — luxury e-commerce mega menu navbar UI ───────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500;600&display=swap');

.nb-mga {
  --nb-mga-void: #080808;
  --nb-mga-deep: #111010;
  --nb-mga-surface: #1a1918;
  --nb-mga-gold: #c9a84c;
  --nb-mga-gold-light: #e8c97a;
  --nb-mga-cream: #f2ede6;
  --nb-mga-muted: #6b6560;
  --nb-mga-border: rgba(201,168,76,0.15);
  --nb-mga-nav-h: 80px;

  position: relative;
  width: 100%;
  min-height: 720px;
  background: var(--nb-mga-deep);
  color: var(--nb-mga-cream);
  font-family: 'Jost', sans-serif;
  overflow: hidden;
  box-sizing: border-box;
}
.nb-mga *, .nb-mga *::before, .nb-mga *::after { box-sizing: border-box; margin: 0; padding: 0; }

.nb-mga nav { position: absolute; top: 0; left: 0; right: 0; z-index: 200; height: var(--nb-mga-nav-h); background: var(--nb-mga-void); border-bottom: 1px solid var(--nb-mga-border); }
.nb-mga .nav-inner { max-width: 1440px; margin: 0 auto; height: 100%; display: flex; align-items: center; padding: 0 3rem; }
.nb-mga .brand { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 300; letter-spacing: 0.3em; text-transform: uppercase; color: var(--nb-mga-cream); text-decoration: none; flex-shrink: 0; margin-right: 4rem; }
.nb-mga .brand strong { color: var(--nb-mga-gold); font-weight: 600; }
.nb-mga .nav-items { display: flex; align-items: stretch; height: 100%; flex: 1; list-style: none; gap: 0; }
.nb-mga .nav-item { position: static; height: 100%; }
.nb-mga .nav-item > a, .nb-mga .nav-item > button { display: flex; align-items: center; gap: 5px; height: 100%; padding: 0 1.4rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(242,237,230,0.6); text-decoration: none; background: none; border: none; cursor: pointer; transition: color 0.2s; position: relative; white-space: nowrap; font-family: inherit; }
.nb-mga .nav-item > a::after, .nb-mga .nav-item > button::after { content: ''; position: absolute; bottom: 0; left: 50%; right: 50%; height: 1px; background: var(--nb-mga-gold); transition: left 0.3s ease, right 0.3s ease; }
.nb-mga .nav-item:hover > a, .nb-mga .nav-item:hover > button, .nb-mga .nav-item:focus-within > a, .nb-mga .nav-item:focus-within > button { color: var(--nb-mga-cream); }
.nb-mga .nav-item:hover > a::after, .nb-mga .nav-item:hover > button::after, .nb-mga .nav-item:focus-within > a::after, .nb-mga .nav-item:focus-within > button::after { left: 1.4rem; right: 1.4rem; }
.nb-mga .chevron { width: 8px; height: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.25s; flex-shrink: 0; }
.nb-mga .nav-item:hover .chevron, .nb-mga .nav-item:focus-within .chevron { transform: rotate(225deg) translateY(-2px); }
.nb-mga .nav-spacer { flex: 1; }
.nb-mga .nav-utils { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.nb-mga .util-btn { display: flex; align-items: center; gap: 6px; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(242,237,230,0.5); background: none; border: none; cursor: pointer; padding: 8px 12px; transition: color 0.2s; white-space: nowrap; font-family: inherit; }
.nb-mga .util-btn:hover { color: var(--nb-mga-cream); }
.nb-mga .cart-btn { display: flex; align-items: center; gap: 8px; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nb-mga-gold); background: none; border: 1px solid var(--nb-mga-border); cursor: pointer; padding: 8px 16px; transition: border-color 0.2s, background 0.2s; margin-left: 0.5rem; font-family: inherit; }
.nb-mga .cart-btn:hover { border-color: var(--nb-mga-gold); background: rgba(201,168,76,0.06); }
.nb-mga .cart-count { background: var(--nb-mga-gold); color: var(--nb-mga-void); font-size: 0.55rem; font-weight: 600; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.nb-mga .sale-flash { color: var(--nb-mga-gold); margin-left: 4px; font-size: 0.6rem; letter-spacing: 0.1em; }

.nb-mga .mega { position: absolute; top: var(--nb-mga-nav-h); left: 0; right: 0; background: var(--nb-mga-void); border-bottom: 1px solid var(--nb-mga-border); z-index: 199; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 0.3s ease, visibility 0.3s, transform 0.3s cubic-bezier(0.16,1,0.3,1); pointer-events: none; }
.nb-mga .nav-item:hover .mega, .nb-mga .nav-item:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: all; }
.nb-mga .mega-inner { max-width: 1440px; margin: 0 auto; padding: 3rem; display: grid; gap: 3rem; }
.nb-mga .mega-women .mega-inner { grid-template-columns: 2fr 1fr 1fr 1.2fr; }
.nb-mga .mega-men .mega-inner { grid-template-columns: 1fr 1fr 1fr 1.5fr; }
.nb-mga .mega-collections .mega-inner { grid-template-columns: repeat(4, 1fr); }
.nb-mga .mega-designers .mega-inner { grid-template-columns: 1fr 1fr 2fr; }
.nb-mga .mega-col-title { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nb-mga-gold); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--nb-mga-border); }
.nb-mga .mega-links { list-style: none; display: flex; flex-direction: column; gap: 0; }
.nb-mga .mega-links a { display: flex; align-items: center; justify-content: space-between; font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 300; color: rgba(242,237,230,0.7); text-decoration: none; padding: 0.55rem 0; border-bottom: 1px solid rgba(201,168,76,0.06); transition: color 0.2s, padding-left 0.2s; }
.nb-mga .mega-links a:hover { color: var(--nb-mga-gold-light); padding-left: 0.5rem; }
.nb-mga .mega-links a span { font-family: 'Jost', sans-serif; font-size: 0.6rem; letter-spacing: 0.1em; color: var(--nb-mga-muted); }
.nb-mga .mega-links a:hover span { color: var(--nb-mga-gold); }

.nb-mga .mega-editorial { position: relative; overflow: hidden; min-height: 240px; background: var(--nb-mga-surface); display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; }
.nb-mga .editorial-pattern { position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 20%, rgba(201,168,76,0.08) 0%, transparent 60%), repeating-linear-gradient(135deg, transparent, transparent 20px, rgba(201,168,76,0.02) 20px, rgba(201,168,76,0.02) 21px); }
.nb-mga .editorial-tag { font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nb-mga-gold); margin-bottom: 0.5rem; position: relative; z-index: 1; }
.nb-mga .editorial-headline { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 300; font-style: italic; color: var(--nb-mga-cream); line-height: 1.3; margin-bottom: 1rem; position: relative; z-index: 1; }
.nb-mga .editorial-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nb-mga-gold); text-decoration: none; transition: gap 0.2s; position: relative; z-index: 1; }
.nb-mga .editorial-cta:hover { gap: 14px; }

.nb-mga .designers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.nb-mga .designer-tile { padding: 0.9rem 1rem; background: var(--nb-mga-surface); font-family: 'Cormorant Garamond', serif; font-size: 1rem; font-weight: 300; color: rgba(242,237,230,0.65); text-decoration: none; transition: background 0.2s, color 0.2s; display: flex; align-items: center; gap: 0.5rem; }
.nb-mga .designer-tile::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--nb-mga-gold); opacity: 0; transition: opacity 0.2s; flex-shrink: 0; }
.nb-mga .designer-tile:hover { background: rgba(201,168,76,0.08); color: var(--nb-mga-gold-light); }
.nb-mga .designer-tile:hover::before { opacity: 1; }

.nb-mga .collection-card { background: var(--nb-mga-surface); padding: 2rem 1.5rem; position: relative; overflow: hidden; transition: transform 0.2s; }
.nb-mga .collection-card:hover { transform: translateY(-4px); }
.nb-mga .collection-card-accent { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--nb-mga-gold), transparent); opacity: 0; transition: opacity 0.2s; }
.nb-mga .collection-card:hover .collection-card-accent { opacity: 1; }
.nb-mga .collection-season { font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nb-mga-gold); margin-bottom: 0.5rem; }
.nb-mga .collection-name { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 300; color: var(--nb-mga-cream); margin-bottom: 0.75rem; line-height: 1.2; }
.nb-mga .collection-desc { font-size: 0.7rem; color: var(--nb-mga-muted); line-height: 1.6; }

.nb-mga .page-content { padding-top: var(--nb-mga-nav-h); min-height: 640px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; gap: 1.5rem; position: relative; overflow: hidden; }
.nb-mga .bg-orb { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.nb-mga .bg-orb-1 { width: 600px; height: 600px; background: rgba(201,168,76,0.04); top: -200px; left: -200px; }
.nb-mga .bg-orb-2 { width: 400px; height: 400px; background: rgba(201,168,76,0.03); bottom: -100px; right: -100px; }
.nb-mga .page-eyebrow { font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nb-mga-gold); }
.nb-mga .page-h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(3.5rem, 8vw, 8rem); font-weight: 300; letter-spacing: 0.05em; color: var(--nb-mga-cream); line-height: 1; }
.nb-mga .page-h1 em { font-style: italic; color: var(--nb-mga-gold); }
.nb-mga .page-sub { font-size: 0.8rem; letter-spacing: 0.08em; color: var(--nb-mga-muted); max-width: 40ch; }
.nb-mga .page-line { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--nb-mga-gold), transparent); }

@media (max-width: 900px) {
  .nb-mga .nav-inner { padding: 0 1.5rem; }
  .nb-mga .nav-items { display: none; }
  .nb-mga .brand { margin-right: 0; flex: 1; }
  .nb-mga .util-btn span, .nb-mga .util-btn { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-mga .mega, .nb-mga .chevron, .nb-mga .collection-card, .nb-mga .designer-tile { transition: none !important; }
}

More from 8 CSS Navbar Designs

Glassmorphism CSS NavbarResponsive CSS Navbar with Hamburger MenuVertical CSS Sidebar NavigationSticky CSS Navbar on ScrollFull Screen Overlay CSS MenuCSS Navbar with Dark Mode ToggleCSS Navbar with Underline Hover Animation
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →