Bootstrap 5 navigation

navigationsmenu

Hvis du vil oprette et simpelt vandret menu, skal du tilføje .nav 类添加到 <ul> element, og derefter for hver <li> element tilføje .nav-item og .nav-link klassen tilføje til deres links:

Eksempel

<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="#">Deaktiveret</a>
  </li>
</ul>

Prøv det selv

juster navigationslinjen

tilføje .justify-content-center klassen gør navigationslinjen centreret, tilføje .justify-content-end klassen gør navigationslinjen højrejusteret.

Eksempel

<!-- Centreret navigations -->
<ul class="nav justify-content-center">
<!-- Højrejusteret navigations -->
<ul class="nav justify-content-end">

Prøv det selv

vertical navigationslinje

tilføje .flex-column klassen kan oprette lodret navigation:

Eksempel

<ul class="nav flex-column">

Prøv det selv

faner

Brug .nav-tabs klassen konverterer navigationsmenuen til navigationsfaner. Og .active klassen tilføjes til aktiv/nuværende link. Hvis du ønsker, at fanerne skal være skiftbare, se sidste eksempel på denne side.

Eksempel

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Aktiv</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="#">Deaktiveret</a>
  </li>
</ul>

Prøv det selv

kapsler

Brug .nav-pills klassen kan konfigurere navigationsmenuen som navigationskapsler. Hvis du ønsker, at kapslerne skal være skiftbare, se sidste eksempel på denne side.

Eksempel

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Aktiv</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="#">Deaktiveret</a>
  </li>
</ul>

Prøv det selv

lignemæssige faner/kapselnavigering

Brug .nav-justified Klasser (lignemæssige) justering af faner/kapsler:

Eksempel

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

Prøv det selv

Kapselmenu

Eksempel

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Aktiv</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</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="#">Deaktiveret</a>
  </li>
</ul>

Prøv det selv

Fanefaldmenu

Eksempel

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Aktiv</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</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="#">Deaktiveret</a>
  </li>
</ul>

Prøv det selv

skiftbare / dynamiske faner

For at gøre faner skiftbare, skal du tilføje data-toggle="tab" egenskab tilføjes til hver link. Tilføj derefter en unik ID til hver fane .tab-pane klassen, og pak dem ind i en boks med .tab-content klassen <div> elementet.

Hvis du ønsker at faner kan fade ind og ud ved klik, skal du tilføje .fade 类添加到 .tab-pane：

Eksempel

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home">Hjem</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>
<!-- Tab panes -->
<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>

Prøv det selv

Klippebare / dynamisk capsule-navigation

Samme kode anvendes til navigation; ændr kun data-toggle-attributten til data-toggle="pill" Det er så nemt:

Eksempel

<!-- Navigation capsule -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="pill" href="#home">Forår</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu1">Før sommeren</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu2">Bjergvandring</a>
  </li>
</ul>
<!-- Options tab pane -->
<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>

Prøv det selv