in English

Navbar

Skjöl og dæmi fyrir öflugan, móttækilegan leiðsagnarhaus Bootstrap, navbarinn. Inniheldur stuðning við vörumerki, siglingar og fleira, þar á meðal stuðning við samrunaviðbótina okkar.

Á þessari síðu

Hvernig það virkar

Hér er það sem þú þarft að vita áður en þú byrjar að nota navbar:

Navbars krefjast umbúðir .navbarmeð .navbar-expand{-sm|-md|-lg|-xl|-xxl}fyrir móttækilega hrynjandi og litasamsetningu flokka.
Navbars og innihald þeirra er sjálfgefið fljótandi. Breyttu ílátinu til að takmarka lárétta breidd þeirra á mismunandi vegu.
Notaðu bil- og sveigjanlegu tólaflokkana okkar til að stjórna bili og jöfnun innan siglingastikanna.
Navbars eru sjálfgefið móttækilegur, en þú getur auðveldlega breytt þeim til að breyta því. Móttækileg hegðun fer eftir Collapse JavaScript viðbótinni okkar.
Tryggðu aðgengi með því að nota <nav>þátt eða, ef notaður er almennari þáttur eins og <div>, bættu við a role="navigation"við hverja siglingastiku til að auðkenna það sem kennileiti svæði fyrir notendur hjálpartækni.
Tilgreindu núverandi atriði með því að nota aria-current="page"fyrir núverandi síðu eða aria-current="true"fyrir núverandi atriði í setti.

Hreyfiáhrif þessa íhluts eru háð prefers-reduced-motionmiðlunarfyrirspurninni. Sjá kaflann um minni hreyfingu í aðgengisskjölunum okkar .

Stutt efni

Navbars koma með innbyggðum stuðningi fyrir handfylli af undirhlutum. Veldu úr eftirfarandi eftir þörfum:

.navbar-brandfyrir fyrirtæki þitt, vöru eða verkefnisheiti.
.navbar-navfyrir fulla hæð og létta siglingu (þar á meðal stuðning við fellilista).
.navbar-togglertil notkunar með samrunaviðbótinni okkar og annarri hegðun til að skipta um siglingar .
Sveigjanleg og bil tól fyrir hvaða formstýringar og aðgerðir sem er.
.navbar-texttil að bæta við lóðrétt miðjum textastreng.
.collapse.navbar-collapsetil að flokka og fela innihald siglingastikunnar með foreldrisbrotspunkti.
Bættu við valfrjálsu .navbar-scrolltil að stilla max-heightog fletta stækkað siglingastikuefni .

Hér er dæmi um alla undiríhluti sem eru innifalin í móttækilegri ljósþema siglingastiku sem hrynur sjálfkrafa saman við lg(stóra) brotpunktinn.

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

Þetta dæmi notar bakgrunns ( bg-light) og bil ( my-2, my-lg-0, me-sm-0, my-sm-0) gagnsemisflokka.

Merki

Hægt .navbar-brander að nota þetta á flesta þætti, en akkeri virkar best, þar sem sumir þættir gætu þurft gagnsemisflokka eða sérsniðna stíl.

Texti

Bættu textanum þínum inn í þætti með .navbar-brandbekknum.

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

Mynd

Þú getur skipt út textanum í textanum .navbar-brandmeð <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>

Mynd og texti

Þú getur líka notað nokkur viðbótartól til að bæta við mynd og texta á sama tíma. Athugaðu viðbótina á .d-inline-blockog .align-text-topá <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

Navbar siglingatenglar byggja á .navvalmöguleikum okkar með sínum eigin breytingaflokki og krefjast notkunar á skiptaflokkum fyrir rétta móttækilega stíl. Leiðsögn á siglingastikum mun einnig stækka og taka eins mikið lárétt pláss og hægt er til að halda innihaldi siglingastikunnar á öruggan hátt.

Bættu .activebekknum við .nav-linktil að sýna núverandi síðu.

Vinsamlegast athugaðu að þú ættir líka að bæta aria-currenteigindinni við virka .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>

Og vegna þess að við notum námskeið fyrir siglingar okkar, geturðu forðast listatengda nálgun algjörlega ef þú vilt.

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

Þú getur líka notað fellivalmyndir í navbarinn þinn. Fellivalmyndir krefjast umbúðaeiningar fyrir staðsetningu, svo vertu viss um að nota aðskilda og hreidda þætti fyrir .nav-itemog .nav-linkeins og sýnt er hér að neðan.

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

Eyðublöð

Settu ýmsar formstýringar og íhluti í siglingastiku:

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

Strax undirlagsþættir í .navbarnotkun sveigjanlegt skipulag og verða sjálfgefið justify-content: space-between. Notaðu viðbótar flex tól eftir þörfum til að stilla þessa hegðun.

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

Inntakshópar vinna líka. Ef navbarinn þinn er heilt eyðublað, eða aðallega eyðublað, geturðu notað <form>þáttinn sem ílátið og vistað smá 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>

Ýmsir hnappar eru einnig studdir sem hluti af þessum navbar eyðublöðum. Þetta er líka frábær áminning um að hægt er að nota lóðrétt jöfnunartæki til að samræma mismunandi stærðir.

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

Texti

Navbars geta innihaldið bita af texta með hjálp .navbar-text. Þessi flokkur aðlagar lóðrétta röðun og lárétt bil fyrir textastrengi.

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

Blandaðu saman við aðra íhluti og tól eftir þörfum.

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

Litasamsetning

Þema navbar hefur aldrei verið auðveldara þökk sé samsetningu þemaflokka og background-colortóla. Veldu úr .navbar-lighttil notkunar með ljósum bakgrunnslitum, eða .navbar-darkfyrir dökka bakgrunnsliti. Síðan skaltu sérsníða með .bg-*tólum.

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

Gámar

Þó að það sé ekki krafist geturðu vefstýrt stýristiku inn til .containerað miðja hana á síðu - þó athugaðu að enn er krafist innri íláts. Eða þú getur bætt við gámi inni í .navbartil að miðja aðeins innihald fastrar eða kyrrstæðrar toppstýringar .

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

Notaðu eitthvað af móttækilegu gámunum til að breyta því hversu breitt efnið á siglingastikunni þinni er kynnt.

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

Staðsetning

Notaðu stöðutólin okkar til að setja siglingastikur í óstöðugar stöður. Veldu úr föstum að toppnum, föstum neðst eða límd við toppinn (flettir með síðunni þar til hún nær efst og helst þar). Fastar navbars nota position: fixed, sem þýðir að þær eru teknar úr venjulegu flæði DOM og gætu þurft sérsniðna CSS (td padding-topá <body>) til að koma í veg fyrir skörun við aðra þætti.

Athugaðu líka að .sticky-topnotar position: sticky, sem er ekki að fullu studd í öllum vafra .

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

Skruna

Bættu .navbar-nav-scrollvið .navbar-nav(eða öðrum undirhluta stýrisstikunnar) til að virkja lóðrétta flun innan breytanlegs innihalds á hruninni siglingastiku. Sjálfgefið er að fletta byrjar á 75vh(eða 75% af útsýnishæðinni), en þú getur hnekkt því með staðbundnum CSS sérsniðnum eiginleikum --bs-navbar-heighteða sérsniðnum stílum. Í stærri útsýnisgluggum þegar siglingastikan er stækkuð mun efni birtast eins og það gerir á sjálfgefna siglingastiku.

Vinsamlegast athugaðu að þessari hegðun fylgir hugsanlegur galli af overflow— þegar stilling overflow-y: auto(nauðsynlegt til að fletta innihaldinu hér), overflow-xjafngildir auto, sem mun skera eitthvað lárétt efni.

Hér er dæmi um navbar sem notar .navbar-nav-scrollmeð style="--bs-scroll-height: 100px;", með nokkrum auka spássíutólum fyrir besta bilið.

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

Móttækileg hegðun

Navbars geta notað .navbar-toggler, .navbar-collapse, og .navbar-expand{-sm|-md|-lg|-xl|-xxl}flokka til að ákvarða hvenær efni þeirra hrynur á bak við hnapp. Ásamt öðrum tólum geturðu auðveldlega valið hvenær á að sýna eða fela tiltekna þætti.

Fyrir siglingastikur sem aldrei hrynja, bætið .navbar-expandbekknum við á stýristikunni. Ekki bæta við neinum .navbar-expandflokki fyrir siglingastikur sem hrynja alltaf.

Toggler

Navbar víxlar eru sjálfgefið vinstrijafnaðir, en ef þeir fylgja systkinaeiningu eins og .navbar-brand, verða þeir sjálfkrafa stilltir lengst til hægri. Að snúa merkingunni við mun snúa við staðsetningu skipta. Hér að neðan eru dæmi um mismunandi skiptistíla.

Með ekkert .navbar-brandsýnt við minnsta brot:

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

Með vörumerki til vinstri og skipta til hægri:

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

Með rofi til vinstri og vörumerki til hægri:

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

Ytra efni

Stundum viltu nota samrunaviðbótina til að kveikja á gámaeiningu fyrir efni sem er skipulagslega staðsett fyrir utan .navbar. Vegna þess að viðbótin okkar virkar á idog data-bs-targetsamsvörun, er það auðveldlega gert!

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>

Þegar þú gerir þetta, mælum við með því að hafa viðbótar JavaScript til að færa fókusinn forritunarlega í ílátið þegar það er opnað. Annars munu lyklaborðsnotendur og notendur hjálpartækni líklega eiga erfitt með að finna nýlega opinberað efnið - sérstaklega ef ílátið sem var opnað kemur á undan skiptanum í uppbyggingu skjalsins. Við mælum líka með því að ganga úr skugga um að skiptarinn hafi aria-controlseiginleikann, sem bendir idá innihaldsílátið. Fræðilega séð gerir þetta notendum hjálpartækni kleift að hoppa beint úr víxlinum yfir í ílátið sem það stjórnar - en stuðningur við þetta er eins og er ansi misjafn.

Offcanvas

Umbreyttu stækkandi og hrynjandi stýristikunni þinni í offcanvas skúffu með offcanvas viðbótinni. Við framlengjum báða sjálfgefna stíla offcanvas og notum .navbar-expand-*flokkana okkar til að búa til kraftmikla og sveigjanlega hliðarstiku.

Í dæminu hér að neðan, til að búa til offcanvas siglingastiku sem er alltaf dregin saman yfir alla brotpunkta, slepptu .navbar-expand-*bekknum alveg.

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

Til að búa til offcanvas siglingastiku sem stækkar í venjulega siglingastiku á ákveðnum brotpunkti eins og lg, notaðu .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

Breytur

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

Lykkju

Móttækilegir flokkar til að stækka/fella saman navbar (td .navbar-expand-lg) eru settir saman við $breakpointskortið og myndaðir í gegnum lykkju í 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;
        }
      }
    }
  }
}