Kembali lagi pada tutorial ke 25 mengani Bootstrap, pada pembahasan kali ini kita akan membahas mengenai komponen pada bootstrap lagi yaitu Navs.
Navs adalah singkatan dari Navigasi, yang berarti sekumpulan komponen yang mengandung link dan telah disediakan oleh bootstrap untuk membuat suatu menu navigasi pada website. Kegunaan Navs atau navigasi sendiri adalah untuk mempermudah pembaca website dalam mengunjungi (melihat) bagian halaman website yang lain.
Ada satu komponen lagi dalam bootstrap yang memiliki fungsi atau maksud yang sama dengan navs yaitu Navbar yang akan kita bahas pada pembahasan selanjutnya.
Dalam bootstrap 4 untuk membuat komponen Navs ini kita perlu menggunakan class .navs pada komponen induk seperti <ul>. Didalam class .navs tentunya terdapat item – item link yang mengarah pada halaman website yang lain, nah item didalam class navs ini diberi class .nav-item.
Kita juga dapat membuat item – item ini aktif atau nonaktif sesuai keinginan kita yaitu dengan menambahkan class .disabled untuk item yang tidak ingin dapat di klik oleh pengguna atau item nonaktif. Pada dasarnya setiap item pada navs yang tidak diberi class tambahan .disabled berari item tersebut aktif dan dapat di klik pengguna. Tetapi jika kita menggunakan class .active pada item navs maka item tersebut akan terlihat biasa tanpa adanya style yang special.
contohnya:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Nav</h2> <p>Basic nasvs horizontal:</p> <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> </div> </body> </html>
Kita juga dapat mengatur perataan pada Navs dengan menggunakan utilitas dari bootstrap yaitu Flex. Secara default Navs pada bootstrap 4 akan muncul dengan rata kiri. Untuk Rata tengah kita tambahkan class .nav justify-content-center, untuk Navs rata kanan kita tambahkan class .nav justify-content-end. Contoh penggunaannya :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Nav</h2>
<p>Nav rata kiri (default):</p>
<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>
<p class="text-center">nav rata tengah:</p>
<ul class="nav justify-content-center">
<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>
<p class="text-right">nav rata kanan:</p>
<ul class="nav justify-content-end">
<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>
</div>
</body>
</html>Selain diarahkan secara horizontal navs juga dapat dibuat secara vertikal, yaitu dengan memanfaatkan utilitas bootstrap yaitu Flex. Tambahkan class .flex-column. Kita juga dapat menambahkan versi responsif dari Flex yaitu dengan class .flex-sm-column. Kita juga dapat membuat vertikal navs tanpa tag <ul> yaitu langsung menempatkan class .navs pada tag navs.
contoh penerpannya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Vertical Nav</h2>
<ul class="nav flex-column">
<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>
</div>
<div class="container">
<h2>Vertical Nav tanpa tag ul</h2>
<nav class="nav flex-column">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
</div>
</body>
</html>
Tabs
Tabs merupakan variasi dari navigasi navs, untuk membuat nya kita menambahkan class .nav-tabs setelah class .nav. Kalau pada dasarnya navs ketika itemnya diberi class .active maka tidak akan berefek apapun, tetapi ketika menggunakan nav-tabs maka ketika itemnya diberi class .active maka akan berefek menghasikan antarmuka tab.
Nah, variasi Tabs juga dapat dibuat memenuhi layar dan masing- masing item memiliki lebar yang sama, untuk melakukan hal ini kita akan menambahkan class .nav-justified atau .nav-fill.
Variasi navigasi ini juga dapat dipadukan dengan dropdown. Untuk melakukan hal ini kita hanya perlu menambahkan class .dropdown pada item navs yang ingin digunakan sebagai triger dan .dropdown-item serta class .dropdown-menu untuk item dropdownnya.
Terdapat satu variasi lagi yang biasa digunakan yaitu toggleable tabs atau navigasu tabs dengan pemuatan konten otomatis, tambahkan atribut data-toggle = "tab" ke setiap tautan. Kemudian tambahkan class .tab-pane dengan ID unik untuk setiap tabs konten dan gabungkan di dalam elemen dengan kelas .tab-content.
Jika Anda ingin tab memudar masuk dan keluar saat mengkliknya, tambahkan kelas .fade ke .tab-pane:
lebih jelasnya silahkan lihat pada contoh dibawah:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Navigation Tabs</h2>
<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>
</div>
<div class="container">
<p>Justified tabs:</p>
<ul class="nav nav-tabs nav-justified">
<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>
</div>
<div class="container">
<h2>Tabs with Dropdown</h2>
<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>
</div>
<div class="container">
<h2>Toggleable Tabs</h2>
<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">ini konten pada home</div>
<div class="tab-pane container fade" id="menu1">ini konten pada menu 1</div>
<div class="tab-pane container fade" id="menu2">ini konten pada menu 2</div>
</div>
</div>
</body>
</html>Pills
Pills merupakan variasi dari navigasi navs, untuk membuat nya kita menambahkan class .nav-pills setelah class .nav. Kalau pada dasarnya navs ketika itemnya diberi class .active maka tidak akan berefek apapun, tetapi ketika menggunakan nav-pills maka ketika itemnya diberi class. active maka akan berefek menghasikan background yang berwarna dan memiliki border.
Nah, variasi Pills juga dapat dibuat memenuhi layar (dengan width yang seimbang) dan masing- masing item memiliki lebar yang sama, untuk melakukan hal ini kita akan menambahkan class .nav-justified atau .nav-fill.
Sama seperti Tabs Variasi navigasi ini juga dapat dipadukan dengan dropdown. Untuk melakukan hal ini kita hanya perlu menambahkan class .dropdown pada item navs yang ingin digunakan sebagai triger dan .dropdown-item serta class .dropdown-menu untuk item dropdownnya.
Untuk melakukan toggleable pills cara nya sama dengan toggleable tabs sebelumnya ya
Berikut variasi navigasi navs pills:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Navigation Pills</h2>
<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>
</div>
<div class="container">
<h2>Justified Tabs/Pills</h2>
<ul class="nav nav-pills nav-justified">
<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>
</div>
<div class="container">
<h2>Pills with Dropdown</h2>
<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>
</div>
<div class="container">
<h2>Toggleable Pills</h2>
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<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 id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
<p>Hai ini adalah konten yang ada dalam salah satu item pils</p>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
<p>Hai ini adalah konten yang ada dalam salah satu item pils</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
<p>Hai ini adalah konten yang ada dalam salah satu item pils</p>
</div>
</div>
</div>
</body>
</html>Sekian penjelasan mengenai menu navigasi .nav semoga bermanfaat . terima kasih
