Bootstrap 5 Navigatie

navigatiemenu

Als je een eenvoudige horizontale menu wilt maken, voeg toe .nav klasse toevoegen aan <ul> elementen, en vervolgens voor elk <li> elementen toe .nav-item en voeg toe .nav-link voeg de klasse toe aan hun links:

Voorbeeld

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

Probeer het zelf

uitlijn navigatielijn

voeg toe .justify-content-center de klasse maakt de navigatie centrair, voeg toe .justify-content-end de klasse maakt de navigatie rechts uitgelijnd.

Voorbeeld

<!-- Centraal uitgelijnde navigatie -->
<ul class="nav justify-content-center">
<!-- Rechts uitgelijnde navigatie -->
<ul class="nav justify-content-end">

Probeer het zelf

verticale navigatielijn

voeg toe .flex-column Klasse kan een verticale navigatie creëren:

Voorbeeld

<ul class="nav flex-column">

Probeer het zelf

tabs

Gebruik .nav-tabs Klasse om het navigatiemenu om te zetten in navigatie tabs. En .active klasse toe aan actieve/actuele link. Als u wilt dat de tabs schakelbaar zijn, raadpleeg dan het laatste voorbeeld op deze pagina.

Voorbeeld

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

Probeer het zelf

kapsels

Gebruik .nav-pills Klasse kan de navigatiemenu instellen als navigatiekapsels. Als u wilt dat de kapsels schakelbaar zijn, raadpleeg dan het laatste voorbeeld op deze pagina.

Voorbeeld

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

Probeer het zelf

evenwijdige tabs/kapsel navigatie

Gebruik .nav-justified Klasse (evenwijdig) uitlijnen van tabs/kapsels:

Voorbeeld

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

Probeer het zelf

Kapsel dropdown menu

Voorbeeld

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

Probeer het zelf

Tabblad dropdown menu

Voorbeeld

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

Probeer het zelf

schakelbare / dynamische tabbladen

Om tabbladen te kunnen wisselen, voeg dan data-toggle="tab" eigenschap toe aan elke link. Voeg vervolgens een link toe met een unieke ID voor elk tabblad met .tab-pane klasse, en wrap ze in een element met .tab-content klasse toe aan <div> elementen toe.

Als u wilt dat de tabbladen in- en uitschuiven wanneer u erop klikt, voeg dan .fade klasse toevoegen aan .tab-pane：

Voorbeeld

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

Probeer het zelf

Schakelbare / Dynamische capsule navigatie

Hetzelfde code geldt voor navigatie; wijzig alleen de data-toggle eigenschap in data-toggle="pill" Klaar:

Voorbeeld

<!-- Navigatie capsule -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="pill" href="#home">Chunri</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu1">Chuxia</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu2">Shanxing</a>
  </li>
</ul>
<!-- Tab kaart venster -->
<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>

Probeer het zelf