Nawigacja Bootstrap 5

menu nawigacyjne

Jeśli chcesz stworzyć prosty poziomy menu, dodaj .nav klasę dodać do <ul> elementy, a następnie dla każdego <li> elementy .nav-item i dodać .nav-link klasa dodaje do ich linków:

Przykład

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Wyłączony</a>
  </li>
</ul>

Spróbuj sam

wyważenie panelu nawigacyjnego

dodaj .justify-content-center klasa sprawia, że nawigacja jest wyważona do środka, dodaj .justify-content-end klasa sprawia, że nawigacja jest wyważona do prawej.

Przykład

<!-- Wyrównanie nawigacji do środka -->
<ul class="nav justify-content-center">
<!-- Wyrównanie nawigacji do prawej -->
<ul class="nav justify-content-end">

Spróbuj sam

pionowy panel nawigacyjny

dodaj .flex-column Klasa może tworzyć pionową nawigację:

Przykład

<ul class="nav flex-column">

Spróbuj sam

Karty

Użyj .nav-tabs Klasa konwertuje menu nawigacyjne na karty nawigacyjne. I umieść .active Klasa dodać do aktywnego/obecnego linku. Jeśli chcesz, aby karta była przełączalna, zobacz ostatni przykład na tej stronie.

Przykład

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Aktywne</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Wyłączony</a>
  </li>
</ul>

Spróbuj sam

kapsułek

Użyj .nav-pills Klasa może ustawić menu nawigacyjne jako nawigację kapsułkową. Jeśli chcesz, aby kapsułka była przełączalna, zobacz ostatni przykład na tej stronie.

Przykład

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Aktywne</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Wyłączony</a>
  </li>
</ul>

Spróbuj sam

równoczesnych kart/kapsułkowych nawigacji

Użyj .nav-justified Klasa (szerokość równa) wyjustowanie etykiet/kapsułek:

Przykład

<ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>

Spróbuj sam

Rozwijane menu kapsułkowe

Przykład

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Aktywne</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Rozwijane menu</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link 1</a></li>
      <li><a class="dropdown-item" href="#">Link 2</a></li>
      <li><a class="dropdown-item" href="#">Link 3</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Wyłączony</a>
  </li>
</ul>

Spróbuj sam

Rozwijane menu kart

Przykład

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Aktywne</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Rozwijane menu</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link 1</a></li>
      <li><a class="dropdown-item" href="#">Link 2</a></li>
      <li><a class="dropdown-item" href="#">Link 3</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Wyłączony</a>
  </li>
</ul>

Spróbuj sam

przełączalne / dynamiczne karty

Aby kartę można było przełączać, dodaj data-toggle="tab" atrybutem dodanym do każdego linku. Następnie dodaj każdej karcie unikalny ID, .tab-pane klasę, a następnie umieść je w ramce z .tab-content klasę <div> element.

Jeśli chcesz, aby karty przycisku można było włączać i wyłączać, dodaj .fade klasę dodać do .tab-pane：

Przykład

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home">Strona główna</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>
<!-- Panele kart -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>

Spróbuj sam

Przełączalne / dynamiczne kapuścynki nawigacyjne

Ten sam kod jest stosowany do nawigacji; wystarczy zmienić atrybut data-toggle na data-toggle="pill" można:

Przykład

<!-- Kapuścynka nawigacyjna -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="pill" href="#home">Wiosna</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu1">Wczesne lato</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu2">Góry</a>
  </li>
</ul>
<!-- Okienko karty -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>

Spróbuj sam