Nawigacja i menu w Bootstrap 5

1. Wprowadzenie

Nawigacja to kluczowy element każdej strony internetowej. Bootstrap 5 oferuje gotowe komponenty do tworzenia responsywnych, profesjonalnych menu nawigacyjnych.

Główne komponenty nawigacji w Bootstrap: * Navbar – główne menu nawigacyjne * Nav – listy nawigacyjne (zakładki, tabsy) * Breadcrumb – ścieżka nawigacyjna (omówiona w poprzedniej lekcji)

2. Navbar – podstawowe menu nawigacyjne

2.1. Podstawowy navbar

Elementy: * .navbar – główny kontener * .navbar-expand-lg – rozwijanie menu na dużych ekranach * .navbar-light / .navbar-dark – jasny/ciemny motyw * .navbar-brand – logo lub nazwa strony * .navbar-toggler – przycisk hamburger menu (na mobile) * .navbar-collapse – zawartość, która się zwija

3. Motywy kolorystyczne navbar

3.1. Jasny navbar

3.2. Ciemny navbar

3.3. Kolorowe navbary

4. Responsywne menu

4.1. Breakpointy dla navbar

Możesz kontrolować, kiedy menu się zwija:

4.2. Kompletny responsywny przykład

5. Dropdown w navbar

5.1. Podstawowy dropdown

5.2. Mega menu (wielokolumnowe)

6. Pozycjonowanie elementów w navbar

6.1. Wyrównanie do prawej

6.2. Menu po obu stronach

7. Navbar z dodatkowymi elementami

7.1. Navbar z przyciskami

7.2. Navbar z formularzem wyszukiwania

7.3. Navbar z tekstem

8. Sticky navbar (przyklejone menu)

8.1. Sticky-top (przykleja na górze przy scrollu)

8.2. Fixed-top (zawsze na górze)

Uwaga: Gdy używasz fixed-top, musisz dodać padding do body, żeby treść nie była zasłonięta:

8.3. Fixed-bottom (na dole ekranu)

9. Nav – zakładki i tabsy

9.1. Podstawowe zakładki (tabs)

9.2. Pills (pigułki)

9.3. Pionowa nawigacja

9.4. Pionowe pills

10. Tabs z treścią (Tab content)

11. Praktyczny przykład: Kompletna strona z nawigacją

12. Podsumowanie

Nawigacja w Bootstrap 5 to potężne narzędzie do tworzenia responsywnych menu:

  • Navbar – główne menu nawigacyjne z automatycznym hamburger menu na mobile
  • Responsywność – kontrola breakpointów (expand-sm, expand-lg, etc.)
  • Motywy – jasne (navbar-light) i ciemne (navbar-dark)
  • Dropdown – rozwijane menu
  • Sticky/Fixed – przyklejone lub stałe menu
  • Nav tabs/pills – zakładki i nawigacja wewnętrzna
  • Pozycjonowanie – elastyczne układanie elementów (ms-auto, me-auto)

Co dalej:

  • Formularze i walidacja
  • Modalne okna i offcanvas
  • Komponenty interaktywne
Wróć do spisu lekcji