Navbar w Bootstrapie to gotowy komponent służący do tworzenia paska nawigacyjnego strony internetowej. Najczęściej zawiera logo lub nazwę serwisu oraz listę odnośników prowadzących do różnych podstron.
W Bootstrap 4 podstawowy pasek nawigacyjny tworzy się za pomocą klasy navbar. Dodatkowo stosuje się klasy określające zachowanie responsywne, np. navbar-expand-sm, navbar-expand-md, navbar-expand-lg lub navbar-expand-xl.
Lista linków w navbarze
Zgodnie z dokumentacją Bootstrap 4 linki w menu należy umieścić w elemencie:
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Strona główna</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
Najważniejsze klasy:
navbar— główna klasa paska nawigacyjnego,navbar-nav— klasa dla listy zawierającej elementy menu,nav-item— klasa dla pojedynczego elementu listy<li>,nav-link— klasa dla odnośnika<a>.
Przykład pełnego menu
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Moja strona</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Start</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Oferta</a>
</li>
</ul>
</nav>
Kolory i wygląd
Do zmiany tła można użyć klas Bootstrapa, np. bg-primary, bg-success, bg-dark, bg-light. Dla ciemnego tła stosuje się zwykle navbar-dark, a dla jasnego navbar-light, aby linki miały odpowiedni kontrast.
W pytaniach egzaminacyjnych warto zapamiętać, że lista linków w Bootstrap Navbar powinna być zapisana jako ul z klasą navbar-nav, a pojedyncze elementy menu jako li.nav-item z odnośnikami a.nav-link.