Navigation

Mega Menu

A “mega menu” is a large, multi‑column dropdown panel for rich site navigation. Wrap your toggle+panel in .quanta-megamenu, and add .show to open.

<div class="quanta-megamenu quanta-megamenu-start show">
  <button class="quanta-megamenu-toggle">Main Menu ▼</button>
  <div class="quanta-megamenu-content w-md fade-in">
    … your columns & links …
  </div>
</div>

Positioning

Align the panel left, center or right: .quanta-megamenu-start (default), .quanta-megamenu-center, .quanta-megamenu-end.

<div class="quanta-megamenu quanta-megamenu-center show">
  <button class="quanta-megamenu-toggle">Centered ▼</button>
  <div class="quanta-megamenu-content w-sm fade-in">…</div>
</div>

Columns & Rows

Use .quanta-megamenu-columns for vertical stacking, add .quanta-megamenu-row to switch to horizontal flex-wrap.

<div class="quanta-megamenu quanta-megamenu-start show">
  <button class="quanta-megamenu-toggle">Layout ▼</button>
  <div class="quanta-megamenu-content w-lg fade-in">
    <div class="quanta-megamenu-columns quanta-megamenu-row">
      <!-- repeat .quanta-megamenu-col -->
    </div>
  </div>
</div>

Width Modifiers

Pick a fixed or auto width: .w-xs, .w-sm, .w-md, .w-lg, .w-xl, .w-full, or .w-auto.

<div class="quanta-megamenu quanta-megamenu-start show">
  <button class="quanta-megamenu-toggle">Width ▼</button>
  <div class="quanta-megamenu-content w-xs fade-in">…</div>
</div>

Animations

Append .fade-in to .quanta-megamenu-content for a smooth fade/slide entrance.

Dark Mode

In dark theme, the menu background, text, shadows and hover states adjust automatically.