Mega Menu

Full-width dropdown navigation menu. Supports 2-, 3-, and 4-column layouts.

WCAG 2.2 AA Reviewed April 2026

Four-Column Mega Menu

View HTML

<div class="txds-mega-menu txds-mega-menu--4col">
  <div class="txds-mega-menu__inner">
    <h3 class="txds-mega-menu__title">Public Health</h3>
    <div class="txds-mega-menu__columns">
      <div class="txds-mega-menu__col">
        <h4 class="txds-mega-menu__col-title">Emergency Preparedness</h4>
        <hr class="txds-mega-menu__col-divider">
        <a class="txds-mega-menu__link" href="#">Disaster planning</a>
        <a class="txds-mega-menu__link" href="#">Hurricane readiness</a>
        <a class="txds-mega-menu__link" href="#">Shelter locations</a>
        <a class="txds-mega-menu__link" href="#">Emergency contacts</a>
        <a class="txds-mega-menu__link" href="#">Supply kit checklist</a>
        <a class="txds-mega-menu__link" href="#">Alert sign-up</a>
      </div>
      <div class="txds-mega-menu__col">
        <h4 class="txds-mega-menu__col-title">Environmental Hazards</h4>
        <hr class="txds-mega-menu__col-divider">
        <a class="txds-mega-menu__link" href="#">Air quality reports</a>
        <a class="txds-mega-menu__link" href="#">Water testing</a>
        <a class="txds-mega-menu__link" href="#">Lead &amp; asbestos</a>
        <a class="txds-mega-menu__link" href="#">Mold remediation</a>
        <a class="txds-mega-menu__link" href="#">Report a hazard</a>
        <a class="txds-mega-menu__link" href="#">Health advisories</a>
      </div>
      <div class="txds-mega-menu__col">
        <h4 class="txds-mega-menu__col-title">Fire Safety</h4>
        <hr class="txds-mega-menu__col-divider">
        <a class="txds-mega-menu__link" href="#">Burn ban status</a>
        <a class="txds-mega-menu__link" href="#">Wildfire updates</a>
        <a class="txds-mega-menu__link" href="#">Fire prevention tips</a>
        <a class="txds-mega-menu__link" href="#">Smoke detector program</a>
        <a class="txds-mega-menu__link" href="#">Fireworks regulations</a>
        <a class="txds-mega-menu__link" href="#">Volunteer firefighters</a>
      </div>
      <div class="txds-mega-menu__col">
        <h4 class="txds-mega-menu__col-title">Crime Reporting</h4>
        <hr class="txds-mega-menu__col-divider">
        <a class="txds-mega-menu__link" href="#">File a report online</a>
        <a class="txds-mega-menu__link" href="#">Crime Stoppers</a>
        <a class="txds-mega-menu__link" href="#">Sex offender registry</a>
        <a class="txds-mega-menu__link" href="#">Victim services</a>
        <a class="txds-mega-menu__link" href="#">Fraud &amp; scam alerts</a>
        <a class="txds-mega-menu__link" href="#">Missing persons</a>
      </div>
    </div>
    <a class="txds-mega-menu__view-all" href="#">
      View all Public Health
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 8 16 12 12 16"/></svg>
    </a>
  </div>
</div>

Three-Column Mega Menu

View HTML

<div class="txds-mega-menu txds-mega-menu--3col">
  <div class="txds-mega-menu__inner">
    <h3 class="txds-mega-menu__title">Public Health</h3>
    <div class="txds-mega-menu__columns">
      <div class="txds-mega-menu__col">
        <h4 class="txds-mega-menu__col-title">Emergency Preparedness</h4>
        <hr class="txds-mega-menu__col-divider">
        <a class="txds-mega-menu__link" href="#">Disaster planning</a>
        <a class="txds-mega-menu__link" href="#">Hurricane readiness</a>
        <a class="txds-mega-menu__link" href="#">Shelter locations</a>
        <a class="txds-mega-menu__link" href="#">Emergency contacts</a>
        <a class="txds-mega-menu__link" href="#">Supply kit checklist</a>
      </div>
      <div class="txds-mega-menu__col">
        <h4 class="txds-mega-menu__col-title">Environmental Hazards</h4>
        <hr class="txds-mega-menu__col-divider">
        <a class="txds-mega-menu__link" href="#">Air quality reports</a>
        <a class="txds-mega-menu__link" href="#">Water testing</a>
        <a class="txds-mega-menu__link" href="#">Lead &amp; asbestos</a>
        <a class="txds-mega-menu__link" href="#">Report a hazard</a>
      </div>
      <div class="txds-mega-menu__col">
        <h4 class="txds-mega-menu__col-title">Fire Safety</h4>
        <hr class="txds-mega-menu__col-divider">
        <a class="txds-mega-menu__link" href="#">Burn ban status</a>
        <a class="txds-mega-menu__link" href="#">Wildfire updates</a>
        <a class="txds-mega-menu__link" href="#">Fire prevention tips</a>
        <a class="txds-mega-menu__link" href="#">Smoke detector program</a>
      </div>
    </div>
    <a class="txds-mega-menu__view-all" href="#">
      View all Public Health
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 8 16 12 12 16"/></svg>
    </a>
  </div>
</div>

Two-Column Mega Menu

View HTML

<div class="txds-mega-menu txds-mega-menu--2col">
  <div class="txds-mega-menu__inner">
    <h3 class="txds-mega-menu__title">Public Health</h3>
    <div class="txds-mega-menu__columns">
      <div class="txds-mega-menu__col">
        <h4 class="txds-mega-menu__col-title">Emergency Preparedness</h4>
        <hr class="txds-mega-menu__col-divider">
        <a class="txds-mega-menu__link" href="#">Disaster planning</a>
        <a class="txds-mega-menu__link" href="#">Hurricane readiness</a>
        <a class="txds-mega-menu__link" href="#">Shelter locations</a>
        <a class="txds-mega-menu__link" href="#">Emergency contacts</a>
        <a class="txds-mega-menu__link" href="#">Supply kit checklist</a>
        <a class="txds-mega-menu__link" href="#">Alert sign-up</a>
        <a class="txds-mega-menu__link" href="#">Evacuation routes</a>
        <a class="txds-mega-menu__link" href="#">Recovery assistance</a>
        <a class="txds-mega-menu__link" href="#">Flood zone maps</a>
      </div>
      <div class="txds-mega-menu__col">
        <h4 class="txds-mega-menu__col-title">Environmental Hazards</h4>
        <hr class="txds-mega-menu__col-divider">
        <a class="txds-mega-menu__link" href="#">Air quality reports</a>
        <a class="txds-mega-menu__link" href="#">Water testing</a>
        <a class="txds-mega-menu__link" href="#">Lead &amp; asbestos</a>
        <a class="txds-mega-menu__link" href="#">Mold remediation</a>
        <a class="txds-mega-menu__link" href="#">Report a hazard</a>
      </div>
    </div>
    <a class="txds-mega-menu__view-all" href="#">
      View all Public Health
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 8 16 12 12 16"/></svg>
    </a>
  </div>
</div>

CSS Classes

Class	Description
`txds-mega-menu`	Outer wrapper with card shadow and rounded bottom corners.
`txds-mega-menu--4col`	Four-column layout modifier.
`txds-mega-menu--3col`	Three-column layout modifier.
`txds-mega-menu--2col`	Two-column layout modifier.
`txds-mega-menu__inner`	Inner padding wrapper.
`txds-mega-menu__title`	Section title (H4 style, primary-50).
`txds-mega-menu__columns`	CSS Grid container for columns.
`txds-mega-menu__col`	Individual column.
`txds-mega-menu__col-title`	Column heading (extrabold, gray-70).
`txds-mega-menu__col-divider`	Horizontal rule under column heading.
`txds-mega-menu__link`	Menu link (underlined, primary-50).
`txds-mega-menu__view-all`	View all link with arrow icon, links to the full section page.