in English

Navbar

Dokumintaasje en foarbylden foar Bootstrap's krêftige, responsive navigaasjekoptekst, de navbar. Omfettet stipe foar branding, navigaasje, en mear, ynklusyf stipe foar ús ynstoartplugin.

Op dizze side

Hoe't it wurket

Hjir is wat jo witte moatte foardat jo begjinne mei de navbar:

Navbars fereaskje in wrapping .navbarmei .navbar-expand{-sm|-md|-lg|-xl|-xxl}foar responsive ynstoarten en kleur skema klassen.
Navbars en har ynhâld binne standert floeiend. Feroarje de kontener om har horizontale breedte op ferskate manieren te beheinen.
Brûk ús spacing- en flex -nutsklassen foar it kontrolearjen fan ôfstân en ôfstimming binnen navbars.
Navbars binne standert responsyf, mar jo kinne se maklik oanpasse om dat te feroarjen. Responsyf gedrach hinget ôf fan ús JavaScript-plugin ynklapt.
Fersekerje tagonklikens troch in <nav>elemint te brûken of, as jo in mear generyk elemint brûke, lykas in <div>, foegje in role="navigation"oan elke navbar ta om it eksplisyt te identifisearjen as in landmarkregio foar brûkers fan assistinte technologyen.
Jou it aktuele item oan troch te brûken aria-current="page"foar de aktuele side of aria-current="true"foar it aktuele item yn in set.

It animaasje-effekt fan dizze komponint is ôfhinklik fan 'e prefers-reduced-motionmediafraach. Sjoch de seksje mei fermindere beweging fan ús dokumintaasje foar tagonklikens .

Stipe ynhâld

Navbars komme mei ynboude stipe foar in hânfol sub-komponinten. Kies út de folgjende as nedich:

.navbar-brandfoar jo bedriuw, produkt of projektnamme.
.navbar-navfoar in folsleine hichte en lichtgewicht navigaasje (ynklusyf stipe foar dropdowns).
.navbar-togglerfoar gebrûk mei ús ynstoartplugin en oare navigaasje-wikselgedrach .
Utilities foar flex en ôfstân foar kontrôles en aksjes fan elke foarm.
.navbar-textfoar it tafoegjen fan fertikaal sintraalde tekststringen.
.collapse.navbar-collapsefoar groepearjen en ferbergjen navbar ynhâld troch in âlder brekpunt.
Foegje in opsjoneel .navbar-scrollta om in útwreide navbar-ynhâldmax-height yn te stellen en te rôljen .

Hjir is in foarbyld fan alle sub-komponinten opnommen yn in responsive ljocht-tema navbar dy't automatysk ynstoart by it lg(grutte) brekpunt.

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

Dit foarbyld brûkt eftergrûn ( bg-light) en spacing ( my-2, my-lg-0, me-sm-0, my-sm-0) nutklassen.

Merk

It .navbar-brandkin tapast wurde op de measte eleminten, mar in anker wurket it bêste, om't guon eleminten nutsklassen as oanpaste stilen fereaskje kinne.

Tekst

Foegje jo tekst ta binnen in elemint mei de .navbar-brandklasse.

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

Byld

Jo kinne de tekst binnen de ferfange .navbar-brandtroch in <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>

Ofbylding en tekst

Jo kinne ek gebrûk meitsje fan wat ekstra nutsbedriuwen om in ôfbylding en tekst tagelyk ta te foegjen. Opmerking de tafoeging fan .d-inline-blocken .align-text-topop 'e <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-navigaasjekeppelings bouwe op ús .navopsjes mei har eigen modifier-klasse en fereaskje it gebrûk fan toggler-klassen foar juste responsive styling. Navigaasje yn navbars sil ek groeie om safolle mooglik horizontale romte yn te nimmen om jo navbar-ynhâld feilich ôfstimd te hâlden.

Foegje de .activeklasse .nav-linkta om de aktuele side oan te jaan.

Tink derom dat jo it aria-currentattribút ek moatte tafoegje oan 'e aktive .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>

En om't wy klassen brûke foar ús navs, kinne jo de list-basearre oanpak folslein foarkomme as jo wolle.

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

Jo kinne ek dropdowns brûke yn jo navbar. Dropdown-menu's fereaskje in wrapping elemint foar posysjonearring, dus wês wis dat jo aparte en nestele eleminten brûke foar .nav-itemen .nav-linklykas hjirûnder werjûn.

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

Formulieren

Pleats ferskate formulierkontrôles en komponinten binnen in navigaasjebalke:

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

Direkte bern eleminten fan .navbargebrûk flex layout en sil standert oan justify-content: space-between. Brûk ekstra flex-helpprogramma's as nedich om dit gedrach oan te passen.

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

Ynputgroepen wurkje ek. As jo navbar in folsleine foarm is, of meast in foarm, kinne jo it <form>elemint brûke as de kontener en wat HTML opslaan.

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

Ferskate knoppen wurde ek stipe as ûnderdiel fan dizze navbarfoarmen. Dit is ek in geweldige herinnering dat nutsbedriuwen foar fertikale ôfstimming kinne wurde brûkt om eleminten fan ferskate grutte út te rjochtsjen.

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

Tekst

Navbars kinne stikjes tekst befetsje mei help fan .navbar-text. Dizze klasse past de fertikale ôfstimming en horizontale ôfstân oan foar tekststrings.

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

Mix en oerien mei oare komponinten en nutsbedriuwen as nedich.

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

Kleurskema's

Tema's fan de navbar hat noait makliker west troch de kombinaasje fan temaklassen en background-colornutsfoarsjenningen. Kies út .navbar-lightfoar gebrûk mei ljochte eftergrûnkleuren, of .navbar-darkfoar donkere eftergrûnkleuren. Pas dan oan mei .bg-*helpprogramma's.

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

Containers

Hoewol it net fereaske is, kinne jo in navbar yn in wikkelje .containerom it op in side te sintrum - hoewol tink derom dat in ynderlike kontener noch fereaske is. Of jo kinne in kontener tafoegje yn 'e .navbarom allinich de ynhâld fan in fêste of statyske topnavigaasje te sintrum .

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

Brûk ien fan 'e responsive konteners om te feroarjen hoe breed de ynhâld yn jo navbar wurdt presintearre.

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

Pleatsing

Brûk ús posysje-hulpprogramma's om navbars yn net-statyske posysjes te pleatsen. Kies út fêst oan 'e boppekant, fêst oan' e ûnderkant, of oan 'e boppekant plakke (scrollt mei de side oant it de top berikt, bliuwt dan dêr). Fêste navbars brûke position: fixed, wat betsjut dat se út 'e normale stream fan' e DOM lutsen wurde en kinne oanpaste CSS (bygelyks padding-topop 'e <body>) fereaskje om oerlaap mei oare eleminten te foarkommen.

Merk ek op dat .sticky-topbrûkt wurdt position: sticky, dy't net folslein yn elke browser stipe wurdt .

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

Scrolling

Taheakje .navbar-nav-scrolloan in .navbar-nav(of oare navbar-subkomponint) om fertikale rôlje yn te skeakeljen binnen de wikselbere ynhâld fan in ynstoarte navbar. Standert skopt it rôljen yn op 75vh(of 75% fan 'e viewporthichte), mar jo kinne dat oerskriuwe mei de lokale CSS-oanpaste eigenskip --bs-navbar-heightof oanpaste stilen. By gruttere viewports as de navbar útwreide wurdt, sil ynhâld ferskine lykas yn in standert navbar.

Tink derom dat dit gedrach komt mei in mooglike neidiel fan overflow-wannear ynstelling overflow-y: auto(fereaske om de ynhâld hjir te rôljen), overflow-xis it ekwivalint fan auto, wat wat horizontale ynhâld sil snije.

Hjir is in foarbyld fan navbar .navbar-nav-scrollmei style="--bs-scroll-height: 100px;", mei wat ekstra marzje-helpprogramma's foar optimale ôfstân.

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

Responsive gedrach

Navbars kinne .navbar-toggler, .navbar-collapse, en .navbar-expand{-sm|-md|-lg|-xl|-xxl}klassen brûke om te bepalen wannear't har ynhâld efter in knop ynstoart. Yn kombinaasje mei oare nutsbedriuwen kinne jo maklik kieze wannear't jo bepaalde eleminten sjen litte of ferbergje.

Foar navbars dy't nea ynstoarte, foegje de .navbar-expandklasse ta oan 'e navbar. Foar navbars dy't altyd ynstoarten, foegje gjin .navbar-expandklasse ta.

Toggler

Navbar-wikselers binne standert linksôfstimd, mar as se in sibling-elemint folgje lykas in .navbar-brand, wurde se automatysk rjochts rjochts rjochts. It omkearjen fan jo markup sil de pleatsing fan 'e toggler omkeare. Hjirûnder binne foarbylden fan ferskate skeakelstilen.

Mei gjin .navbar-brandwerjûn op it lytste brekpunt:

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

Mei in merknamme werjûn oan de linkerkant en toggler oan de rjochterkant:

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

Mei in toggler links en merknamme rjochts:

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

Eksterne ynhâld

Soms wolle jo de ynklapplugin brûke om in kontenerelemint te triggerjen foar ynhâld dy't struktureel bûten de .navbar. Omdat ús plugin wurket op de iden data-bs-targetmatching, dat is maklik dien!

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>

As jo dit dogge, riede wy oan om ekstra JavaSkript op te nimmen om de fokus programmatysk nei de kontener te ferpleatsen as it wurdt iepene. Oars sille toetseboerdbrûkers en brûkers fan assistinte technologyen wierskynlik in hurde tiid hawwe om de nij iepenbiere ynhâld te finen - foaral as de kontener dy't iepene is foar de toggler komt yn 'e struktuer fan it dokumint. Wy riede ek oan om derfoar te soargjen dat de toggler it aria-controlsattribút hat, ferwizend nei de ynhâldkontainer id. Yn teory lit dit brûkers fan assistintetechnology direkt fan 'e toggler nei de kontener springe dy't it kontrolearret - mar stipe hjirfoar is op it stuit frij patchy.

Offcanvas

Transformearje jo útwreidzjende en ynfallende navbar yn in offcanvas-lade mei de offcanvas-plugin. Wy wreidzje sawol de offcanvas-standertstilen út en brûke ús .navbar-expand-*klassen om in dynamyske en fleksibele navigaasjesidebalke te meitsjen.

Yn it foarbyld hjirûnder, om in offcanvas navbar te meitsjen dy't altyd ynstoart is oer alle brekpunten, lit de .navbar-expand-*klasse hielendal weilitte.

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

Om in offcanvas navbar te meitsjen dy't útwreidet yn in normale navbar op in spesifyk brekpunt lykas lg, brûk .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

Fariabelen

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

Loop

Responsive navbar útwreidzje / ynstoarten klassen (bgl. .navbar-expand-lg) wurde kombinearre mei de $breakpointskaart en oanmakke troch in lus yn 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;
        }
      }
    }
  }
}