Membuat Link Navigasi di Bootstrap 4

Jika kalian ingin membuat link menu horizontal, kalian dapat menambahkan class .nav ke dalam elemen <ul>, diikuti dengan class .nav-item untuk setiap elemen <li> dan class .nav-link ke dalam elemen <a>. Contoh:

Nav Horizontal

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

Lihat kode di Github | Lihat Live Demo


Mengatur Perataan Link Navigasi di Bootstrap

Kita dapat menambahkan class .justify-content-center untuk membuat Link navigasi menjadi rata tengah dan class .justify-content-end membuat link navigasi menjadi rata kanan. Contoh:

Mengatur Perataan Link Navigasi di Bootstrap

<!-- Rata Tengah -->
<ul class="nav justify-content-center">

<!-- Rata Kanan -->
<ul class="nav justify-content-end">

Lihat kode di Github | Lihat Live Demo

Membuat Link Navigasi Vertikal di Bootstrap 4

Kita juga dapat menggunakan class .flex-column untuk membuat link navigasi menjadi vertikal. Contoh:

Membuat Link Navigasi Vertikal di Bootstrap 4

<ul class="nav flex-column">

Lihat kode di Github | Lihat Live Demo

Membuat Navigasi Tab di Bootstrap 4

Kita dapat mengubah link menu navigasi menjadi Tab dengan menggunakan class .nav-tabs. Kita dapat menambahkan class .active ke dalam Link aktif. Jika kalian ingin Tab dapat menjadi togglable (On/Off), kalian dapat melihat contoh terakhir pada seri ini:

Membuat Navigasi Tab di Bootstrap 4

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

Lihat kode di Github | Lihat Live Demo

Membuat Navigasi Pill di Bootstrap 4

Untuk mengubah link navigasi menjadi Pill, kita dapat menggunakan class .nav-pil. Jika kalian ingin Pill dapat menjadi togglable (On/Off), kalian dapat melihat contoh terakhir pada seri ini:

Membuat Navigasi Pill di Bootstrap 4

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

Lihat kode di Github | Lihat Live Demo

Membuat Navigasi Tab/Pill Sama Rata di Bootstrap 4

Untuk membuat link navigasi Tab/Pill menjadi sama rata, kita dapat menggunakan class .nav-justified. Contoh:

Membuat Navigasi Tab/Pill Sama Rata di Bootstrap 4

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

Lihat kode di Github | Lihat Live Demo

Membuat Navigasi Pill dengan Dropdown di Bootstrap 4

Membuat Navigasi Pill dengan Dropdown di Bootstrap 4

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Lihat kode di Github | Lihat Live Demo

Membuat Navigasi Tab dengan Dropdown di Bootstrap 4

Membuat Navigasi Tab dengan Dropdown di Bootstrap 4

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul> 

Lihat kode di Github | Lihat Live Demo

Membuat Tab menjadi Toggleable di Bootstrap 4

Untuk membuat Tab menjadi Toggleable (On/Off), kita dapat menambahkan atribut data-toggle="tab" ke dalam setiap Link. Kemudian, tambahkan class .tab-pane dengan ID yang unik pada setiap Tab yang berada di dalam elemen <div> dengan class .tab-content.

Jika kalian ingin membuat Tab menjadi Fade in dan Fade Out saat Tab tersebut di klik, kalian dapat menambahkan class .fade bersamaan dengan class .tab-pane. Contoh:

Membuat Tab menjadi Toggleable di Bootstrap 4

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

Lihat kode di Github | Lihat Live Demo

Membuat Pill menjadi Toggleable di Bootstrap 4

Kode yang sama seperti Tab Toggleable juga dapat diterapkan pada Pill; kita hanya perlu mengubah atribut data-toggle menjadi data-toggle="pill". Contoh:

Membuat Pill menjadi Toggleable di Bootstrap 4

<!-- Pill -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="pill" 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>

Lihat kode di Github | Lihat Live Demo

Tulis Komentar

0 Komentar