in English

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.

Di halaman ini

Bagaimana itu bekerja

Inilah yang perlu Anda ketahui sebelum memulai dengan navbar:

Navbar memerlukan pembungkus .navbardengan .navbar-expand{-sm|-md|-lg|-xl|-xxl}untuk penciutan responsif dan kelas skema warna .
Navbar dan isinya lancar secara default. Ubah wadah untuk membatasi lebar horizontalnya dengan cara yang berbeda.
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.
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.
Tunjukkan item saat ini dengan menggunakan aria-current="page"untuk halaman saat ini atau aria-current="true"untuk item saat ini dalam satu set.

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.
Utilitas fleksibel dan spasi untuk kontrol dan tindakan formulir apa pun.
.navbar-textuntuk menambahkan string teks yang dipusatkan secara vertikal.
.collapse.navbar-collapseuntuk mengelompokkan dan menyembunyikan konten navbar oleh breakpoint induk.
Tambahkan opsional .navbar-scrolluntuk menyetel max-heightdan menggulir konten navbar yang diperluas .

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">
  <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

Merek

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

Teks

Tambahkan teks Anda dalam elemen dengan .navbar-brandkelas.

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

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

Gambar

Anda dapat mengganti teks di dalam .navbar-branddengan <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    </a>
  </div>
</nav>

Gambar dan teks

Anda juga dapat menggunakan beberapa utilitas tambahan untuk menambahkan gambar dan teks secara bersamaan. Perhatikan penambahan .d-inline-blockdan .align-text-toppada <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

navigasi

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.

Tambahkan .activekelas .nav-linkuntuk menunjukkan halaman saat ini.

Harap dicatat bahwa Anda juga harus menambahkan aria-currentatribut pada active .nav-link.

<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="#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">
          <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>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </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">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </div>
    </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">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <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>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Formulir

Tempatkan berbagai kontrol formulir dan komponen dalam navbar:

<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 .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">
  <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 adalah seluruh formulir, atau sebagian besar formulir, Anda dapat menggunakan <form>elemen 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 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="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>

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">
  <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>

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-meskipun perhatikan bahwa wadah dalam masih diperlukan. 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">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
</div>

Gunakan salah satu wadah responsif untuk mengubah seberapa lebar konten di navbar Anda disajikan.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-md">
    <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">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

Menggulir

Tambahkan .navbar-nav-scrollke .navbar-nav(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 properti kustom CSS lokal --bs-navbar-heightatau gaya 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="--bs-scroll-height: 100px;", dengan beberapa utilitas margin tambahan untuk jarak yang optimal.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <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="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <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">Link</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>

Perilaku responsif

Navbar dapat menggunakan .navbar-toggler, .navbar-collapse, dan .navbar-expand{-sm|-md|-lg|-xl|-xxl}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">
  <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 yang ditampilkan di sebelah kiri dan toggler 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 toggler 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>

Konten eksternal

Terkadang Anda ingin menggunakan plugin ciutkan untuk memicu elemen penampung konten yang secara struktural berada di luar .navbar. Karena plugin kami berfungsi iddan data-bs-targetcocok, itu mudah dilakukan!

Konten yang diciutkan

Dapat dialihkan melalui merek navbar.

<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">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

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.

Kelancangan

Variabel

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);

$navbar-light-brand-color:                $navbar-light-active-color;
$navbar-light-brand-hover-color:          $navbar-light-active-color;
$navbar-dark-brand-color:                 $navbar-dark-active-color;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color;

Lingkaran

Navbar responsif memperluas/menciutkan kelas (misalnya, .navbar-expand-lg) digabungkan dengan $breakpointspeta dan dihasilkan melalui loop di scss/_navbar.scss.

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: $navbar-nav-link-padding-x;
            padding-left: $navbar-nav-link-padding-x;
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }
      }
    }
  }
}