Navigation

Keep group labels short, limit each group to a focused set of destinations, and reserve the featured visual for one useful destination. Use imagery to aid recognition, not to turn every link into a thumbnail.

<nav class="versa-mega" data-versa-mega aria-label="Mega menu example">
  <div class="versa-mega__bar">
    <a class="versa-mega__brand" href="#">Versa</a>
    <button class="versa-mega__mobile-toggle" type="button" aria-expanded="false" aria-controls="versa-mega-menu"><span>Menu</span><i class="bi bi-list" aria-hidden="true"></i></button>
    <div class="versa-mega__nav" id="versa-mega-menu">
      <div class="versa-mega__item">
        <button class="versa-mega__trigger" type="button" aria-expanded="false" aria-controls="versa-mega-products">Products <i class="bi bi-chevron-down" aria-hidden="true"></i></button>
        <div class="versa-mega__panel" id="versa-mega-products">
          <div class="versa-mega__grid">
            <div class="versa-mega__group"><p class="versa-mega__label">Build</p><a href="#"><strong>Components</strong><span>Flexible interface building blocks</span></a><a href="#"><strong>Templates</strong><span>Complete production-ready layouts</span></a><a href="#"><strong>Examples</strong><span>Patterns assembled for real projects</span></a></div>
            <div class="versa-mega__group"><p class="versa-mega__label">Customize</p><a href="#"><strong>Themes</strong><span>Adapt color, type and visual tone</span></a><a href="#"><strong>Icons</strong><span>Accessible Bootstrap Icon patterns</span></a><a href="#"><strong>Utilities</strong><span>Helpful Versa layout enhancements</span></a></div>
            <div class="versa-mega__group"><p class="versa-mega__label">Learn</p><a href="#"><strong>Documentation</strong><span>Start building with Versa</span></a><a href="#"><strong>Accessibility</strong><span>Inclusive patterns and guidance</span></a><a href="#"><strong>Release notes</strong><span>See what changed in Versa</span></a></div>
            <a class="versa-mega__feature" href="#"><span class="versa-site-eyebrow">Featured</span><strong>Build faster with Versa</strong><span>Explore the complete component library and production patterns.</span><span class="versa-mega__feature-link">Explore components <i class="bi bi-arrow-right" aria-hidden="true"></i></span></a>
          </div>
        </div>
      </div>
      <a href="#">Solutions</a><a href="#">Resources</a><a href="#">Company</a>
      <a class="btn btn-primary versa-mega__cta" href="#">Get started</a>
    </div>
  </div>
</nav>