Gean nei haadynhâld Gean nei dokumintnavigaasje
Check
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.
  • Nij yn v5.2.0: Navbars kinne wurde tematyske mei CSS fariabelen dy't scoped nei de .navbarbasis klasse. .navbar-lightis ôfret en .navbar-darkis opnij skreaun om CSS-fariabelen te oerskriuwen ynstee fan ekstra stilen ta te foegjen.
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 ynklap-plugin en oare navigaasje-wikselgedrach .
  • Utilities foar flex en ôfstân foar kontrôles en aksjes fan elke foarm.
  • .navbar-textfoar it tafoegjen fan fertikaal sintraal teksttekens.
  • .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.

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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 ( me-auto, mb-2, mb-lg-0, me-2) 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.

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

<!-- As a heading -->
<nav class="navbar 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>.

html 
<nav class="navbar bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" 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>.

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

html 
<nav class="navbar navbar-expand-lg 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.

html 
<nav class="navbar navbar-expand-lg 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.

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><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:

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <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.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <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.

html 
<nav class="navbar 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.

html 
<nav class="navbar 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.

html 
<nav class="navbar 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.

html 
<nav class="navbar navbar-expand-lg 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

Nij yn v5.2.0: Navbar- tema wurdt no oandreaun troch CSS-fariabelen en .navbar-lightis ôfret. CSS-fariabelen wurde tapast op .navbar, standert foar it "ljocht" uterlik, en kinne wurde oerskreaun mei .navbar-dark.

Navbar-tema's binne makliker dan ea troch Bootstrap's kombinaasje fan Sass- en CSS-fariabelen. De standert is ús "ljochte navbar" foar gebrûk mei ljochte eftergrûnkleuren, mar jo kinne ek oanfreegje .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" 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 .

html 
<div class="container">
  <nav class="navbar navbar-expand-lg 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.

html 
<nav class="navbar navbar-expand-lg 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, oan 'e boppekant plakke (scrollt mei de side oant it boppe berikt, bliuwt dêr), of plakt nei ûnderen (scrollt mei de side oant it ûnderoan komt, 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.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
html 
<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
html 
<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
html 
<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>
html 
<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</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.

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Link</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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:

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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:

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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:

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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!

html 
<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 skeakel 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 de stipe hjirfoar is op it stuit frij patchy.

Offcanvas

Transformearje jo útwreidzjende en ynfallende navbar yn in offcanvas-lade mei it offcanvas-komponint . 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 folslein oer.

html 
<nav class="navbar 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" 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <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-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>

As jo ​​​​offcanvas brûke yn in donkere navbar, wês dan bewust dat jo miskien in donkere eftergrûn hawwe moatte op 'e offcanvas-ynhâld om foar te kommen dat de tekst ûnlêsber wurdt. Yn it foarbyld hjirûnder foegje wy .navbar-darken .bg-darkoan 'e .navbar, .text-bg-darkoan' e .offcanvas, .dropdown-menu-darknei .dropdown-menu, en .btn-close-whiteoan .btn-closefoar goede styling mei in donkere offcanvas.

html 
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <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" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

CSS

Fariabelen

Taheakke yn v5.2.0

As ûnderdiel fan Bootstrap's evoluearjende CSS-fariabelen-oanpak, brûke navbars no lokale CSS-fariabelen op .navbarfoar ferbettere real-time oanpassing. Wearden foar de CSS-fariabelen wurde ynsteld fia Sass, sadat Sass-oanpassing ek noch stipe wurdt.

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

Guon ekstra CSS-fariabelen binne ek oanwêzich op .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

Oanpassing fia CSS fariabelen kin sjoen wurde op 'e .navbar-darkklasse dêr't wy oerskriuwe spesifike wearden sûnder tafoegjen fan dûbele CSS selectors.

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

Sass fariabelen

Fariabelen foar alle navbars:

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

Fariabelen foar de tsjustere navbar :

$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-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

Sass 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: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}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 {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

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