in English

Navbar

Dokuméntasi sareng conto pikeun Bootstrap anu kuat, lulugu navigasi responsif, navbar. Ngawengku dukungan pikeun branding, navigasi, sareng seueur deui, kalebet dukungan pikeun plugin runtuh kami.

Dina kaca ieu

Kumaha gawéna

Ieu naon anu anjeun kedah terang sateuacan ngamimitian navbar:

Navbars merlukeun hiji wrapping .navbarkalawan .navbar-expand{-sm|-md|-lg|-xl|-xxl}pikeun responsif collapsing jeung kelas skéma warna .
Navbars sareng eusina cairan sacara standar. Robah wadahna pikeun ngawatesan lebar horisontal ku cara anu béda.
Anggo kelas utilitas jarak sareng fleksibel pikeun ngatur jarak sareng alignment dina navbar.
Navbars responsif sacara standar, tapi anjeun bisa kalayan gampang ngaropea aranjeunna pikeun ngarobah éta. Paripolah responsif gumantung kana plugin Collapse JavaScript urang.
Pastikeun diakses ku ngagunakeun <nav>unsur atawa, lamun ngagunakeun unsur nu leuwih umum kayaning a <div>, tambahkeun a role="navigation"ka unggal navbar pikeun eksplisit ngaidentipikasi eta salaku wewengkon Landmark pikeun pamaké téknologi assistive.
Nunjukkeun item ayeuna ku cara ngagunakeun aria-current="page"pikeun kaca ayeuna atawa aria-current="true"keur item ayeuna dina susunan.

Pangaruh animasi tina komponén ieu gumantung kana prefers-reduced-motionpamundut média. Tempo bagian gerak ngurangan tina dokuméntasi aksés kami .

Eusi anu dirojong

Navbars hadir kalayan dukungan anu diwangun pikeun sakeupeul subkomponén. Milih ti handap sakumaha diperlukeun:

.navbar-brandpikeun perusahaan, produk, atanapi nami proyék anjeun.
.navbar-navpikeun navigasi anu jangkung sareng hampang (kalebet dukungan pikeun turunna).
.navbar-togglerpikeun dianggo sareng plugin runtuh kami sareng paripolah toggling navigasi anu sanés .
Utiliti Flex sareng jarak pikeun sagala bentuk kontrol sareng tindakan.
.navbar-textpikeun nambahkeun string vertikal dipuseurkeun téks.
.collapse.navbar-collapsepikeun ngagolongkeun jeung nyumputkeun eusi navbar ku breakpoint indungna.
Tambahkeun pilihan .navbar-scrollpikeun nyetél max-heighttur ngagulung eusi navbar dimekarkeun .

Ieu conto sadaya sub-komponén anu kalebet dina navbar téma lampu responsif anu otomatis runtuh dina lgtitik putus (badag).

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

Conto ieu ngagunakeun latar tukang ( bg-light) jeung spasi ( my-2,,, my-lg-0) me-sm-0kelas my-sm-0utiliti.

merek

The .navbar-brandbisa dilarapkeun ka paling elemen, tapi anchor jalan pangalusna, sabab sababaraha elemen bisa merlukeun kelas utiliti atawa gaya custom.

Téks

Tambahkeun téks anjeun dina hiji unsur jeung .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

Anjeun tiasa ngagentos téks dina éta .navbar-brandkalayan <img>.

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

Gambar jeung téks

Anjeun oge bisa make sababaraha utiliti tambahan pikeun nambahkeun hiji gambar jeung téks dina waktos anu sareng. Perhatikeun tambahan .d-inline-blockna .align-text-topdina <img>.

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

Nav

Tumbu navigasi Navbar ngawangun on .navpilihan urang jeung kelas modifier sorangan sarta merlukeun pamakéan kelas toggler pikeun styling responsif ditangtoskeun. Navigasi dina navbars ogé bakal tumuwuh pikeun nempatan saloba spasi horizontal sabisa pikeun ngajaga eusi navbar anjeun aman Blok.

Tambahkeun .activekelas .nav-linkpikeun nunjukkeun kaca ayeuna.

Punten dicatet yén anjeun ogé kedah nambihan aria-currentatribut dina aktip .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">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Sarta alatan kami ngagunakeun kelas pikeun navs kami, Anjeun bisa nyingkahan pendekatan dumasar-daftar sagemblengna lamun resep.

<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">Disabled</a>
      </div>
    </div>
  </div>
</nav>

Anjeun oge bisa make dropdowns dina navbar Anjeun. Menu dropdown merlukeun unsur wrapping pikeun positioning, jadi pastikeun ngagunakeun elemen misah tur nested pikeun .nav-itemtur .nav-linkditémbongkeun di handap ieu.

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

Bentuk

Tempatkeun rupa-rupa kadali formulir sareng komponén dina 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 anak .navbarsaharita pamakéan perenah flex sarta bakal dituna pikeun justify-content: space-between. Paké Utiliti flex tambahan sakumaha diperlukeun pikeun nyaluyukeun kabiasaan ieu.

<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 ogé dianggo. Mun navbar anjeun mangrupa sakabéh formulir, atawa lolobana formulir a, anjeun tiasa nganggo <form>unsur salaku wadahna tur nyimpen sababaraha 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>

Rupa-rupa tombol dirojong salaku bagian tina formulir navbar ieu, teuing. Ieu ogé panginget hébat yén utiliti alignment nangtung bisa dipaké pikeun align elemen ukuran béda.

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

Téks

Navbars bisa ngandung bit téks kalayan bantuan .navbar-text. Kelas ieu nyaluyukeun alignment nangtung sareng jarak horizontal pikeun senar téks.

<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 sareng cocog sareng komponén sareng utilitas sanés upami diperyogikeun.

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

Skéma warna

Theming navbar geus pernah geus gampang berkat kombinasi kelas theming na background-colorUtiliti. Pilih .navbar-lightpikeun dianggo sareng warna latar anu terang, atanapi .navbar-darkkanggo warna latar anu poék. Teras, saluyukeun sareng .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>

Wadahna

Sanaos henteu diperyogikeun, anjeun tiasa ngabungkus navbar dina a .containerpikeun dipuseurkeun kana halaman-sanaos dicatet yén wadah jero masih diperyogikeun. Atanapi anjeun tiasa nambihan wadah di jero .navbarpikeun ngan ukur pusat eusi navbar luhur tetep atanapi statik .

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

Anggo salah sahiji wadah anu responsif pikeun ngarobih sabaraha lebar eusi dina navbar anjeun dibere.

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

panempatan

Anggo utilitas posisi kami pikeun nempatkeun navbar dina posisi non-statis. Pilih tina tetep ka luhur, tetep ka handap, atanapi nempel ka luhur (ngagulung sareng halamanna dugi ka luhur, teras tetep aya). Navbars tetep make position: fixed, hartina aranjeunna nuju ditarik tina aliran normal tina DOM sarta bisa merlukeun CSS custom (misalna padding-topdina <body>) pikeun nyegah tumpang tindihna jeung elemen séjén.

Catet ogé yén .sticky-topngagunakeun position: sticky, anu henteu dirojong sapinuhna dina unggal 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>

Ngagulung

Tambahkeun .navbar-nav-scrollka .navbar-nav(atawa sub-komponén navbar séjén) pikeun ngaktipkeun ngagulung nangtung dina eusi toggleable navbar rubuh. Sacara standar, ngagulung najong dina 75vh(atawa 75% tina jangkungna viewport), tapi anjeun bisa override nu mibanda sipat custom CSS lokal --bs-navbar-heightatawa gaya custom. Dina viewports badag nalika navbar dimekarkeun, eusi bakal némbongan sakumaha dina navbar standar.

Perhatikeun yén kabiasaan ieu hadir kalawan poténsi kalemahan - overflownalika setelan overflow-y: auto(diperlukeun pikeun ngagulung eusi di dieu), overflow-xsarua jeung auto, nu bakal motong sababaraha eusi horizontal.

Ieu conto navbar anu nganggo .navbar-nav-scroll, style="--bs-scroll-height: 100px;"sareng sababaraha utilitas margin tambahan pikeun jarak anu 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">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>

kabiasaan responsif

Navbars tiasa nganggo .navbar-toggler, .navbar-collapse, sareng .navbar-expand{-sm|-md|-lg|-xl|-xxl}kelas pikeun nangtukeun iraha eusina runtuh di tukangeun tombol. Dina kombinasi sareng utilitas anu sanés, anjeun tiasa sacara gampil milih nalika nunjukkeun atanapi nyumputkeun elemen khusus.

Pikeun navbars nu pernah ambruk, tambahkeun .navbar-expandkelas on navbar nu. Pikeun navbars nu salawasna ambruk, ulah nambahkeun .navbar-expandkelas nanaon.

Toggler

Toggler Navbar sacara standar kénca-kénca, tapi upami aranjeunna nuturkeun unsur duduluran sapertos a .navbar-brand, aranjeunna bakal otomatis dijajarkeun ka katuhu jauh. Ngabalikeun markup anjeun bakal ngabalikeun panempatan toggler. Di handap ieu conto gaya toggle béda.

Kalawan henteu .navbar-brandditémbongkeun dina breakpoint pangleutikna:

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

Kalayan nami merek anu dipidangkeun di kénca sareng toggler di katuhu:

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

Kalayan toggler di kénca sareng nami merek di katuhu:

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

Eusi éksternal

Kadang anjeun hoyong nganggo plugin runtuhna pikeun memicu unsur wadahna pikeun eusi anu sacara stuktur linggih di luar .navbar. Kusabab plugin urang jalan dina idtur data-bs-targetcocog, éta gampang dipigawé!

Collapsed content

Toggleable via the navbar brand.

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

Lamun anjeun ngalakukeun ieu, kami nyarankeun kaasup JavaScript tambahan pikeun mindahkeun fokus programmatically kana wadahna lamun dibuka. Upami teu kitu, pangguna keyboard sareng pangguna téknologi pitulung sigana bakal sesah milarian eusi anu nembé diungkabkeun - khususna upami wadahna anu dibuka sateuacanna toggler dina struktur dokumén. Kami ogé nyarankeun pikeun mastikeun yén toggler gaduh aria-controlsatribut, nunjuk ka idwadah eusi. Sacara téori, ieu ngamungkinkeun pamaké téknologi pitulung pikeun luncat langsung tina toggler kana wadahna anu dikontrol-tapi dukungan pikeun ieu ayeuna rada pareum.

Offcanvas

Transformasi navbar ngembang sareng runtuh anjeun janten laci offcanvas nganggo plugin offcanvas. Urang ngalegaan duanana gaya standar offcanvas sareng nganggo .navbar-expand-*kelas kami pikeun nyiptakeun sidebar navigasi anu dinamis sareng fleksibel.

Dina conto di handap, pikeun nyieun hiji navbar offcanvas nu salawasna rubuh sakuliah sakabéh breakpoints, ngaleungitkeun .navbar-expand-*kelas sagemblengna.

<nav class="navbar navbar-light bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <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="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
              <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>
        </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>
  </div>
</nav>

Pikeun nyieun navbar offcanvas nu ngalegaan kana navbar normal dina breakpoint husus kawas lg, make .navbar-expand-lg.

<nav class="navbar navbar-light navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

Sass

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;

Gelung

navbar responsif dilegakeun / runtuhna kelas (contona, .navbar-expand-lg) digabungkeun jeung $breakpointspeta tur dihasilkeun ngaliwatan 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;
        }

        .offcanvas-header {
          display: none;
        }

        .offcanvas {
          position: inherit;
          bottom: 0;
          z-index: 1000;
          flex-grow: 1;
          visibility: visible !important; // stylelint-disable-line declaration-no-important
          background-color: transparent;
          border-right: 0;
          border-left: 0;
          @include transition(none);
          transform: none;
        }
        .offcanvas-top,
        .offcanvas-bottom {
          height: auto;
          border-top: 0;
          border-bottom: 0;
        }

        .offcanvas-body {
          display: flex;
          flex-grow: 0;
          padding: 0;
          overflow-y: visible;
        }
      }
    }
  }
}