Source

navigasi

Dokumentasi dan contoh untuk tajuk navigasi Bootstrap yang kuat dan responsif, navbar. Termasuk dukungan untuk pencitraan merek, navigasi, dan lainnya, termasuk dukungan untuk plugin penciutan kami.

Bagaimana itu bekerja

Inilah yang perlu Anda ketahui sebelum memulai dengan navbar:

  • Navbar memerlukan pembungkus .navbardengan .navbar-expand{-sm|-md|-lg|-xl}untuk penciutan responsif dan kelas skema warna .
  • Navbar dan isinya lancar secara default. Gunakan wadah opsional untuk membatasi lebar horizontalnya.
  • Gunakan kelas utilitas penspasian dan fleksibel kami untuk mengontrol penspasian dan perataan dalam navbars.
  • Navbar responsif secara default, tetapi Anda dapat dengan mudah memodifikasinya untuk mengubahnya. Perilaku responsif bergantung pada plugin Ciutkan JavaScript kami.
  • Navbars disembunyikan secara default saat mencetak. Paksa mereka untuk dicetak dengan menambahkan .d-printfile .navbar. Lihat kelas utilitas tampilan .
  • Pastikan aksesibilitas dengan menggunakan <nav>elemen atau, jika menggunakan elemen yang lebih umum seperti a <div>, tambahkan a role="navigation"ke setiap bilah navigasi untuk mengidentifikasinya secara eksplisit sebagai kawasan tengara bagi pengguna teknologi pendukung.

Efek animasi komponen ini bergantung pada prefers-reduced-motionkueri media. Lihat bagian pengurangan gerakan pada dokumentasi aksesibilitas kami .

Baca terus untuk contoh dan daftar sub-komponen yang didukung.

Konten yang didukung

Navbar hadir dengan dukungan bawaan untuk beberapa sub-komponen. Pilih dari yang berikut sesuai kebutuhan:

  • .navbar-branduntuk nama perusahaan, produk, atau proyek Anda.
  • .navbar-navuntuk navigasi tinggi penuh dan ringan (termasuk dukungan untuk dropdown).
  • .navbar-toggleruntuk digunakan dengan plugin penciutan kami dan perilaku beralih navigasi lainnya.
  • .form-inlineuntuk kontrol dan tindakan bentuk apa pun.
  • .navbar-textuntuk menambahkan string teks yang dipusatkan secara vertikal.
  • .collapse.navbar-collapseuntuk mengelompokkan dan menyembunyikan konten navbar oleh breakpoint induk.

Berikut adalah contoh semua sub-komponen yang disertakan dalam navbar bertema cahaya responsif yang secara otomatis diciutkan pada lgbreakpoint (besar).

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

Merek

.navbar-brandDapat diterapkan ke sebagian besar elemen, tetapi jangkar berfungsi paling baik karena beberapa elemen mungkin memerlukan kelas utilitas atau gaya khusus .

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

Menambahkan gambar ke .navbar-brandkemungkinan akan selalu membutuhkan gaya atau utilitas khusus untuk ukuran yang benar. Berikut adalah beberapa contoh untuk menunjukkan.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Tautan navigasi Navbar dibangun di atas .navopsi kami dengan kelas pengubahnya sendiri dan memerlukan penggunaan kelas toggler untuk gaya responsif yang tepat. Navigasi di navbars juga akan tumbuh untuk menempati ruang horizontal sebanyak mungkin untuk menjaga konten navbar Anda tetap selaras.

Status aktif—dengan .active—untuk menunjukkan halaman saat ini dapat diterapkan langsung ke .nav-links atau induk langsungnya .nav-items.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Dan karena kami menggunakan kelas untuk navigasi kami, Anda dapat menghindari pendekatan berbasis daftar sepenuhnya jika Anda mau.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Anda juga dapat menggunakan dropdown di navbar nav Anda. Menu tarik-turun memerlukan elemen pembungkus untuk pemosisian, jadi pastikan untuk menggunakan elemen terpisah dan bersarang untuk .nav-itemdan .nav-linkseperti yang ditunjukkan di bawah ini.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Formulir

Tempatkan berbagai kontrol bentuk dan komponen dalam navbar dengan .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Elemen anak-anak langsung .navbarmenggunakan tata letak fleksibel dan akan default ke justify-content: space-between. Gunakan utilitas fleksibel tambahan sesuai kebutuhan untuk menyesuaikan perilaku ini.

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Grup input juga berfungsi:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <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 bentuk navbar ini. Ini juga merupakan pengingat yang bagus bahwa utilitas penyelarasan vertikal dapat digunakan untuk menyelaraskan elemen berukuran berbeda.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

Teks

Navbars mungkin berisi bit teks dengan bantuan .navbar-text. Kelas ini menyesuaikan perataan vertikal dan spasi horizontal untuk string teks.

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

Campur dan cocokkan dengan komponen dan utilitas lain sesuai kebutuhan.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>

Skema warna

Memberi tema navbar tidak pernah semudah ini berkat kombinasi kelas dan background-colorutilitas bertema. Pilih dari .navbar-lightuntuk digunakan dengan warna latar belakang terang, atau .navbar-darkuntuk warna latar belakang gelap. Kemudian, 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>

Wadah

Meskipun tidak diperlukan, Anda dapat membungkus navbar di a .containeruntuk memusatkannya pada halaman atau menambahkannya di dalam untuk hanya memusatkan konten navbar atas tetap atau statis .

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

Saat container berada di dalam navbar Anda, padding horizontalnya dihapus pada titik henti sementara yang lebih rendah dari .navbar-expand{-sm|-md|-lg|-xl}kelas yang Anda tentukan. Ini memastikan kami tidak menggandakan padding yang tidak perlu pada viewports yang lebih rendah saat navbar Anda diciutkan.

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

Penempatan

Gunakan utilitas posisi kami untuk menempatkan navbars di posisi non-statis. Pilih dari tetap ke atas, tetap ke bawah, atau menempel ke atas (gulir dengan halaman hingga mencapai atas, lalu tetap di sana). Navbar tetap menggunakan position: fixed, artinya mereka ditarik dari aliran normal DOM dan mungkin memerlukan CSS khusus (misalnya, padding-toppada <body>) untuk mencegah tumpang tindih dengan elemen lain.

Perhatikan juga bahwa .sticky-topusing position: sticky, yang tidak sepenuhnya didukung di setiap browser .

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Default</a>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

Perilaku responsif

Navbar dapat memanfaatkan .navbar-toggler, .navbar-collapse, dan .navbar-expand{-sm|-md|-lg|-xl}kelas untuk berubah saat kontennya diciutkan di belakang tombol. Dalam kombinasi dengan utilitas lain, Anda dapat dengan mudah memilih kapan harus menampilkan atau menyembunyikan elemen tertentu.

Untuk navbars yang tidak pernah runtuh, tambahkan .navbar-expandkelas di navbar. Untuk navbar yang selalu diciutkan, jangan tambahkan .navbar-expandkelas apa pun.

Toggler

Toggler Navbar rata kiri secara default, tetapi jika mereka mengikuti elemen saudara seperti a .navbar-brand, mereka akan secara otomatis disejajarkan ke paling kanan. Membalikkan markup Anda akan membalikkan penempatan toggler. Di bawah ini adalah contoh gaya toggle yang berbeda.

Tanpa .navbar-brandditampilkan di breakpoint terendah:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Dengan nama merek yang ditampilkan di sebelah kiri dan toggler di sebelah kanan:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Dengan toggler di sebelah kiri dan nama merek di sebelah kanan:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Konten eksternal

Terkadang Anda ingin menggunakan plugin ciutkan untuk memicu konten tersembunyi di tempat lain di halaman. Karena plugin kami berfungsi iddan data-targetcocok, itu mudah dilakukan!

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>