Tworzenie MegaMenu w Bootstrap 5 — kompletny przewodnik

1. Wprowadzenie

MegaMenu to rozszerzony dropdown, który wyświetla wiele kolumn, sekcji lub zakładek w jednym rozwijanym panelu. Bootstrap 5 nie zawiera go w standardzie, ale dzięki klasom utility (np. position-static, d-flex, row, col-*) można łatwo zbudować responsywne i dostępne megamenu.

2. Podstawowy szablon dropdown

Bootstrapowy dropdown wygląda tak:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
    Projekty i aplikacje
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Projekt 1</a></li>
    <li><a class="dropdown-item" href="#">Projekt 2</a></li>
  </ul>
</li>

To dobra baza — teraz rozbudujemy ją w kierunku megamenu.

3. Ustawienie dropdowna na pełną szerokość

Użyjemy klasy position-static, aby dropdown nie był „pozycjonowany” względem rodzica, oraz w-100, aby zajmował całą szerokość kontenera.

<li class="nav-item dropdown position-static">
  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
    Projekty i aplikacje
  </a>
  <div class="dropdown-menu w-100 mt-0 border-0 shadow p-3">
    <div class="container">
      <div class="row">
        <div class="col-lg-3">
          <h6 class="text-uppercase">Projekty</h6>
          <ul class="list-unstyled">
            <li><a href="#" class="dropdown-item">Cube Builder</a></li>
            <li><a href="#" class="dropdown-item">Randki++</a></li>
            <li><a href="#" class="dropdown-item">Moduły Koseven</a></li>
          </ul>
        </div>
        <div class="col-lg-3">
          <h6 class="text-uppercase">Aplikacje</h6>
          <ul class="list-unstyled">
            <li><a href="#" class="dropdown-item">YAML Tester</a></li>
            <li><a href="#" class="dropdown-item">Markdown Tester</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</li>

Teraz dropdown otwiera panel z kolumnami jak w megamenu.

4. Dodanie zakładek (tabs)

Aby użytkownik mógł przełączać sekcje (np. „Wszystko”, „Najlepsze projekty”, „Blog”), wstawiamy Bootstrap Tabs wewnątrz dropdown-menu.

<div class="dropdown-menu w-100 p-3 shadow">
  <ul class="nav nav-tabs mb-3" id="megamenuTabs" role="tablist">
    <li class="nav-item">
      <button class="nav-link active" id="all-tab" data-bs-toggle="tab" data-bs-target="#all" type="button">Wszystko</button>
    </li>
    <li class="nav-item">
      <button class="nav-link" id="best-tab" data-bs-toggle="tab" data-bs-target="#best" type="button">Najlepsze projekty</button>
    </li>
    <li class="nav-item">
      <button class="nav-link" id="apps-tab" data-bs-toggle="tab" data-bs-target="#apps" type="button">Polecane aplikacje</button>
    </li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane fade show active" id="all">
      <!-- zawartość jak w sekcji kolumn -->
    </div>
    <div class="tab-pane fade" id="best">
      <!-- karty projektów -->
    </div>
    <div class="tab-pane fade" id="apps">
      <!-- karty aplikacji -->
    </div>
  </div>
</div>

5. Dodanie kart projektów i aplikacji

Bootstrap 5 ma gotowe klasy card. Aby przycisk w każdej karcie był wyrównany do dołu, użyjemy d-flex flex-column i mt-auto.

<div class="row g-3">
  <div class="col-md-4">
    <div class="card h-100 d-flex flex-column">
      <img src="https://via.placeholder.com/300x120.png?text=Cube+Builder" class="card-img-top" alt="">
      <div class="card-body d-flex flex-column">
        <h5 class="card-title">Cube Builder</h5>
        <p class="card-text flex-grow-1">Twórz własne pliki LUT z łatwością.</p>
        <a href="#" class="btn btn-outline-primary mt-auto align-self-start">Zobacz więcej</a>
      </div>
    </div>
  </div>
  <!-- powtórz 3x -->
</div>

6. Zatrzymanie zamykania megamenu po kliknięciu w tab

Domyślnie Bootstrap zamyka dropdown po każdym kliknięciu. Dodaj prosty JS:

<script>
  document.querySelectorAll('.dropdown-menu .nav-tabs button').forEach(tab => {
    tab.addEventListener('click', e => e.stopPropagation());
  });
  document.querySelectorAll('.dropdown-menu .tab-content').forEach(content => {
    content.addEventListener('click', e => e.stopPropagation());
  });
</script>

7. Opcjonalnie: otwieranie megamenu po najechaniu (hover)

<script>
  const dropdown = document.querySelector('.nav-item.dropdown');
  dropdown.addEventListener('mouseenter', () => {
    const menu = new bootstrap.Dropdown(dropdown.querySelector('[data-bs-toggle="dropdown"]'));
    menu.show();
  });
  dropdown.addEventListener('mouseleave', () => {
    const menu = new bootstrap.Dropdown(dropdown.querySelector('[data-bs-toggle="dropdown"]'));
    menu.hide();
  });
</script>

8. Responsywność i styl

Możesz dodać kilka poprawek CSS dla lepszego UX:

@media (max-width: 991px) {
  .dropdown-menu {
    position: static !important;
  }
}
.dropdown-menu {
  border-radius: 0.75rem;
  border: 1px solid rgba(0,0,0,.1);
}
.nav-tabs .nav-link {
  font-weight: 500;
}

9. Pełny przykład działającego megamenu

Zobacz działający przykład

10. Podsumowanie