Bootstrap Navbar menus

Apa itu Bootstrap Navbar menus

Navbar adalah salah satu fitur yang menonjol dari situs Bootstrap. Dalam tampilan mobile Navbars menu menjadi horisontal. Pada intinya, navbar termasuk styling untuk nama situs dan navigasi dasar.

Dasar dalam pembuatan navbar menu

Masukkan class  .navbar, .navbar-default di dalam tag <nav>.
Masukkan juga role=”navigation” di dalam tag <nav> untuk bantuan accessibility.
Masukkan di header class .nav-header di dalam elemen <div>, sertakan juga tag <a> diantara <div></div> yang menjadikan ukuran teks agak sedikit membesar.
Untuk menambahkan link ke menu navbar masukkan class .nav, .navbar-nav.

Responsive Navbar

Untuk menjadikan navbar responsif, di dalam <div> masukkan class .collapse, .navbar-collapse, .data-target, yang menunjukkan elemen untuk beralih. Masukkan juga class .icon-bar untuk mengatur icon.

Forms di Navbar menus

Untuk membuat form didalam navbar menu, gunakan class .navbar-form. Biasanya form didalam navbar biasanya untuk pencarian.

Tombol di navbar menus

Hanya dengan memasukkan class .navbar-btn untuk tombol <button> didalam <form>.

Text di Navbar menus

Masukkan class .navbar-text didalam tag <p> yang akan memberikan efek warna.

Non-nav Links

Jika ingin menggunakan link standar didalam navbar menu, gunakanlah class .navbar-link.

Component Alignment

Kita bisa membuat komponen text, link, button ataupun form mejadi ke kiri atau ke kanan, hanya dengan menggunakan class .navbar-left atau .navbar-right.

Fixed to Top

Standar navbar menu pada saat kita scroll website, navbar menu akan hilang, akan tetapi navbar menu dapat terus terlihat diatas pada saat kita scroll website dengan bantuan class .navbar-fixed-top.

Fixed to Bottom

Navbar menu pun dapat terus terlihat dibagian bawah dengan menggunakan class .navbar-fixed-bottom.

Inverted Navbar

Warna background di bootstrap navbar berwarna putih, akan tetapi bootstrap pun memberikan warna pilihan background hitam, hanya dengan menggunakan class .navbar-inverse.

See the Pen Bootstrap navbar menus by yoris (@yoris) on CodePen.