in English

navigasi

Dokumentasi dan contoh untuk tajuk navigasi Bootstrap yang kuat dan responsif, navbar. Termasuk dukungan untuk branding, navigasi, plugin ciutkan, dan banyak lagi.

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 .

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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <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">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.6/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.6/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">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-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

Anda juga dapat menggunakan dropdown di navbar 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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <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 turunan langsung dari .navbarpenggunaan 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 Anda dapat menambahkan wadah di dalam .navbaruntuk 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>

Menggulir

Tambahkan .navbar-nav-scrollke .navbar-collapse(atau sub-komponen bilah navigasi lainnya) untuk mengaktifkan pengguliran vertikal dalam konten yang dapat dialihkan dari bilah navigasi yang diciutkan. Secara default, pengguliran dimulai pada 75vh(atau 75% dari ketinggian viewport), tetapi Anda dapat menggantinya dengan gaya sebaris atau kustom. Pada viewport yang lebih besar saat navbar diperluas, konten akan muncul seperti halnya di navbar default.

Harap perhatikan bahwa perilaku ini disertai dengan potensi kelemahan overflow—saat pengaturan overflow-y: auto(diperlukan untuk menggulir konten di sini), overflow-xsetara dengan auto, yang akan memotong beberapa konten horizontal.

Berikut adalah contoh penggunaan navbar .navbar-nav-scrollwith style="max-height: 100px;", dengan beberapa utilitas margin tambahan untuk jarak yang optimal.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarScroll">
    <ul class="navbar-nav mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Link
        </a>
        <ul class="dropdown-menu">
          <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">Link</a>
      </li>
    </ul>
    <form class="d-flex">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Perilaku responsif

Navbar dapat menggunakan .navbar-toggler, .navbar-collapse, dan .navbar-expand{-sm|-md|-lg|-xl}kelas untuk menentukan kapan 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 terkecil:

<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">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">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">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 elemen penampung untuk konten yang secara struktural berada di luar .navbar. Karena plugin kami berfungsi iddan data-targetcocok, itu mudah dilakukan!

<div class="fixed-top">
  <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>

Saat Anda melakukan ini, sebaiknya sertakan JavaScript tambahan untuk memindahkan fokus secara terprogram ke penampung saat dibuka. Jika tidak, pengguna keyboard dan pengguna teknologi bantu kemungkinan akan kesulitan menemukan konten yang baru terungkap - terutama jika wadah yang dibuka berada sebelum tombol dalam struktur dokumen. Kami juga merekomendasikan untuk memastikan bahwa toggler memiliki aria-controlsatribut, menunjuk ke idwadah konten. Secara teori, ini memungkinkan pengguna teknologi bantu untuk melompat langsung dari toggler ke wadah yang dikontrolnya – tetapi dukungan untuk ini saat ini cukup tambal sulam.