Navbar
Navbar
Example

Yang perlu Anda ketahui sebelum memulai dengan navbar:

Navbar memerlukan pembungkusan .navbar dengan kelas skema warna .navbar-expand{-sm|-md|-lg|-xl|-xxl} dan penciutan responsif. Navbar dan kontennya bersifat fleksibel secara default. Ubah wadah untuk membatasi lebar horizontalnya dengan berbagai cara. Gunakan kelas utilitas spasi dan fleksibel kami untuk mengontrol spasi dan penyelarasan dalam bilah navigasi.

Navbar bersifat responsif secara default, tetapi Anda dapat dengan mudah mengubahnya. Perilaku responsif bergantung pada plugin Collapse JavaScript kami. Pastikan aksesibilitas dengan menggunakan <nav> elemen atau, jika menggunakan elemen yang lebih umum seperti <div>, tambahkan role="navigation" ke setiap bilah navigasi untuk secara eksplisit mengidentifikasinya sebagai wilayah penting bagi pengguna teknologi bantu. Tunjukkan item saat ini dengan menggunakan aria-current="page" untuk halaman saat ini atau aria-current="true" untuk item saat ini dalam kumpulan.

Supported Content

Navbar dilengkapi dengan dukungan bawaan untuk beberapa subkomponen. Pilih dari yang berikut ini sesuai kebutuhan:

.navbar-brand untuk nama perusahaan, produk, atau proyek Anda. .navbar-nav untuk navigasi penuh dan ringan (termasuk dukungan untuk dropdown). .navbar-toggler untuk digunakan dengan plugin runtuh kami dan perilaku pengalih navigasi lainnya. .navbar-text untuk menambahkan string teks yang terpusat secara vertikal. .collapse.navbar-collapse untuk mengelompokkan dan menyembunyikan konten navbar berdasarkan breakpoint induk. Tambahkan opsional .navbar-scroll untuk menyetel max-height dan menggulir konten bilah navigasi yang diperluas.

Berikut adalah contoh semua subkomponen yang disertakan dalam navbar bertema terang responsif yang secara otomatis runtuh pada lg titik henti (besar):

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Contoh ini menggunakan kelas utilitas background (bg-light) dan spasi my-2, my-lg-0, me-sm-0, (my-sm-0).

Text
Tambahkan teks Anda dalam elemen dengan .navbar-brand kelas.
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>
 
Navbar dapat berisi potongan teks dengan bantuan .navbar-text. Kelas ini menyesuaikan perataan vertikal dan spasi horizontal untuk rangkaian teks.
 
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>
 

Campur dan cocokkan dengan komponen dan utilitas lain sesuai kebutuhan.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav>​

Forms

Anda dapat menempatkan berbagai kontrol dan komponen formulir di dalam navbar seperti yang ditunjukkan di atas. Formulir pencarian di navbar ini memiliki input untuk pencarian teks dan tombol pencarian yang menggunakan kelas Bootstrap untuk gaya dan perilaku responsif yang sesuai.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Elemen turunan langsung dari .navbartata letak fleksibel dan akan menggunakan default justify-content: space-between. Gunakan  utilitas fleksibel  tambahan sesuai kebutuhan untuk menyesuaikan perilaku ini.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Grup input juga berfungsi. Jika navbar Anda merupakan keseluruhan formulir, atau sebagian besar formulir, Anda dapat menggunakan <form>elemen tersebut sebagai wadah dan menyimpan beberapa HTML.

 

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

Berbagai tombol juga didukung sebagai bagian dari formulir navbar ini. Ini juga merupakan pengingat yang bagus bahwa utilitas penyelarasan vertikal dapat digunakan untuk menyelaraskan elemen dengan ukuran berbeda.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>
Color schemes

Pemberian tema pada navbar tidak pernah semudah ini berkat kombinasi kelas dan background-colorutilitas pemberian tema. Pilih .navbar-lightuntuk digunakan dengan warna latar belakang terang, atau .navbar-darkuntuk warna latar belakang gelap. Lalu, sesuaikan dengan .bg-*utilitas.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>
Containers

Meskipun tidak diwajibkan, Anda dapat membungkus navbar dalam .containeruntuk memusatkannya pada halaman–meskipun perlu dicatat bahwa wadah bagian dalam tetap diperlukan. Atau Anda dapat menambahkan wadah di dalam .navbaruntuk hanya memusatkan konten navbar atas yang tetap atau statis .

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
</div>
Toggler

Pengalih bilah navigasi disejajarkan ke kiri secara default, tetapi jika mengikuti elemen saudaranya seperti .navbar-brand, pengalih akan otomatis disejajarkan ke paling kanan. Membalikkan markup akan membalikkan penempatan pengalih. Berikut ini adalah contoh gaya pengalih yang berbeda.

Tanpa .navbar-brandditampilkan pada titik henti terkecil:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Hidden brand</a>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Dengan nama merek ditampilkan di sebelah kiri dan tombol alih di sebelah kanan:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Dengan tombol alih di sebelah kiri dan nama merek di sebelah kanan:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
Tag :