Navbar na ɛwɔ hɔ

Nwoma ne nhwɛsoɔ ma Bootstrap tumi, mmuaeɛ akwantuo ti, navbar. Nea ɛka ho ne mmoa a wɔde ma branding, navigation, ne nea ɛkeka ho, a mmoa a wɔde ma yɛn collapse plugin no ka ho.

Wɔ kratafa yi so

Sɛnea ɛyɛ adwuma

Nea ɛsɛ sɛ wuhu ansa na woafi ase de navbar no ni:

Navbars hwehwɛ wrapping .navbarne .navbar-expand{-sm|-md|-lg|-xl|-xxl}ma mmuae collapsing ne kɔla nhyehyɛe adesua ahorow.
Navbars ne emu nsɛm no yɛ nsu default. Sesa ade no ma ɛnyɛ wɔn trɛw a ɛkɔ soro no ano hye wɔ akwan horow so.
Fa yɛn spacing ne flex utility classes no di dwuma ma hwɛ spacing ne alignment wɔ navbars mu.
Navbars no yɛ mmuae default so, nanso wubetumi asesa no ntɛm de asesa saa. Suban a ɛma mmuae gyina yɛn Collapse JavaScript plugin no so.
Hwɛ sɛ wobɛtumi anya bi denam <nav>element bi a wode bedi dwuma so anaasɛ, sɛ wode element a ɛyɛ generic kɛse te sɛ a redi dwuma a <div>, fa a ka role="navigation"navbar biara ho de kyerɛ pefee sɛ ɛyɛ ɔmantam a ɛyɛ agyiraehyɛde ma wɔn a wɔde mfiridwuma a ɛboa di dwuma no.
Kyerɛ ade a ɛwɔ hɔ mprempren no denam fa a wode bedi dwuma aria-current="page"ama kratafa a ɛwɔ hɔ mprempren no anaasɛ aria-current="true"ade a ɛwɔ hɔ mprempren wɔ nhyehyɛe bi mu no so.

Animation nkɛntɛnso a ɛwɔ saa ade yi mu no gyina prefers-reduced-motionmedia asɛmmisa no so. Hwɛ yɛn akwan a wɔfa so nya nneɛma ho nkrataa no fã a wɔatew so no .

Nsɛm a wɔboa

Navbars ba a wɔasisi mu mmoa ma nsa kakraa bi sub-components. Paw nea edidi so yi mu sɛnea ɛho hia:

.navbar-brandma wo adwumakuw, ade, anaa adwuma no din.
.navbar-navma akwantu a ɛkorɔn ne nea emu yɛ hare (a mmoa a wɔde ma wɔ nneɛma a wɔde gu fam ka ho).
.navbar-togglersɛ wode bedi dwuma wɔ yɛn collapse plugin ne navigation toggling suban afoforo ho.
Flex ne spacing utilities ma krataa biara controls ne nneyɛe.
.navbar-textsɛ wode nsɛm nhama a ɛwɔ mfinimfini gyina hɔ bɛka ho.
.collapse.navbar-collapsema navbar mu nsɛm a wɔde akuwakuw na wɔde sie denam ɔwofo breakpoint so.
Fa optional bi ka ho .navbar-scrollna fa set a max-heightna scroll expanded navbar content .

Nhwɛsoɔ a ɛfa sub-components nyinaa a ɛka ho wɔ responsive light-themed navbar a ɛhwe ase ankasa wɔ lg(kɛseɛ) breakpoint no ni.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Saa nhwɛsoɔ yi de akyi ( bg-light) ne ntamgyinafoɔ ( my-2, my-lg-0, me-sm-0, my-sm-0) mfasoɔ adesua ahodoɔ di dwuma.

Adeban

Wobetumi de The .navbar-brandno adi dwuma wɔ element dodow no ara ho, nanso anchor yɛ adwuma yiye, efisɛ element ahorow bi betumi ahwehwɛ utility classes anaa custom styles.

Atwerɛ

Fa wo nsɛm no ka element bi ho ne .navbar-brandadesuakuw no.

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

Mfoni

Wubetumi de nsɛm a ɛwɔ mu no asi ananmu .navbar-brandde <img>.

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

Mfonini ne nsɛm a wɔakyerɛw

Wubetumi nso de nneɛma foforo bi adi dwuma de mfonini ne nsɛm aka ho bere koro mu. Hyɛ nea wɔde aka ho .d-inline-blockne .align-text-topnea ɛwɔ so no nsow <img>.

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

Nav

Navbar navigation links si yɛn .navoptions so ne wɔn ankasa modifier class na ɛhwehwɛ sɛ wɔde toggler classes di dwuma ma mmuae a ɛfata styling. Navigation wɔ navbars mu nso bɛnyin akɔfa horizontal space pii sɛdeɛ ɛbɛyɛ yie na ama wo navbar mu nsɛm no akɔ so ayɛ pɛpɛɛpɛ.

Fa .activeadesuakuw no ka ho .nav-linkna kyerɛ kratafa a ɛwɔ hɔ mprempren no.

Yɛsrɛ wo hyɛ no nsow sɛ ɛsɛ sɛ wode aria-currentattribute no nso ka active no ho .nav-link.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Na esiane sɛ yɛde classes di dwuma ma yɛn navs nti, wubetumi akwati list-based approach no koraa sɛ wopɛ a.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </div>
    </div>
  </div>
</nav>

Wubetumi nso de dropdowns adi dwuma wɔ wo navbar no mu. Dropdown menus hwehwɛ wrapping element ma positioning, enti hwɛ hu sɛ wode elements a ɛtetew ne nested bedi dwuma ama .nav-itemne .nav-linksɛnea wɔakyerɛ wɔ ase ha no.

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

Nkyerɛwee ahorow

Fa form controls ne components ahorow gu navbar bi mu:

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

Ntɛm ara abofra elements of .navbaruse flex layout na ɛbɛ default akɔ justify-content: space-between. Fa flex utilities foforo di dwuma sɛnea ɛho hia na ama woatumi ayɛ nsakrae wɔ saa suban yi mu.

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

Input akuw nso yɛ adwuma. Sɛ wo navbar yɛ fom mũ no nyinaa, anaasɛ dodow no ara yɛ fom a, wubetumi de <form>element no adi dwuma sɛ container no na wode HTML bi asie.

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

Wɔboa bɔton ahorow sɛ navbar nkrataa yi fã, nso. Eyi nso yɛ nkaebɔ kɛse sɛ wobetumi de vertical alignment utilities adi dwuma de ahyɛ element ahorow a ne kɛse gu ahorow mu.

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

Atwerɛ

Navbars betumi akura nsɛm nketenkete bi a ɛnam .navbar-text. Saa adesua yi sesa vertical alignment ne horizontal spacing ma nsɛm a wɔahyehyɛ no nhama.

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

Fa fra na fa nneɛma afoforo ne nneɛma a wɔde di dwuma no fra mu sɛnea ɛho hia.

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

Kɔla ahorow a wɔde yɛ nneɛma

Theming navbar no nyɛ mmerɛw da esiane theming adesua ahorow ne background-colorutilities a wɔaka abom nti. Paw bi .navbar-lightna wode bedi dwuma wɔ akyi kɔla a ɛyɛ hann, anaasɛ .navbar-darkakyi kɔla a ɛyɛ tumm. Afei, fa .bg-*utilities yɛ wo ho sɛnea wopɛ.

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

Nneɛma a wɔde gu mu

Ɛwom sɛ ɛnyɛ nea ɛho hia de, nanso wubetumi abɔ navbar mu wɔ a mu .containerde ayɛ mfinimfini wɔ kratafa bi so–ɛwom sɛ hyɛ no nsow sɛ wɔda so ara hia ade a ɛwɔ mu de. Anaasɛ wubetumi de ade bi aka ho wɔ mu .navbarde ayɛ mfinimfini navbar a ɛwɔ soro a ɛyɛ pintinn anaasɛ ɛnyɛ nea ɛwɔ soro no mu nkutoo .

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

Fa responsive containers no mu biara sesa sɛnea wɔde nsɛm a ɛwɔ wo navbar no mu no trɛw.

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

Nneɛma a wɔde bɛto hɔ

Fa yɛn gyinabea utilities no si navbars wɔ gyinabea a ɛnyɛ static. Paw fixed to the top, fixed to the bottom, anaa stickied to the top (fa kratafa no kyerɛw kosi sɛ ebedu soro, afei ɛtra hɔ). Fixed navbars de di dwuma position: fixed, a ɛkyerɛ sɛ wɔtwe wɔn fi DOM no nsu a ɛsen daa no mu na ebetumi ahwehwɛ CSS a wɔahyɛ da ayɛ (sɛ nhwɛso no, padding-topwɔ <body>) no so na asiw nneɛma afoforo a ɛbɛka abom no ano.

Afei nso hyɛ no nsow sɛ .sticky-topde di dwuma position: sticky, a wɔmfa mmoa koraa wɔ browser biara mu .

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

Nsɛm a Wɔahyehyɛ

Fa ka .navbar-nav-scroll( .navbar-navanaasɛ navbar sub-component foforo) ho na ama woatumi ayɛ vertical scrolling wɔ toggleable contents a ɛwɔ navbar a abubu no mu. Sɛnea wɔahyɛ no, scrolling kicks in wɔ 75vh(anaasɛ 75% wɔ viewport height), nanso wubetumi de local CSS custom property --bs-navbar-heightanaa custom styles no abɔ so. Wɔ viewports akɛse mu bere a wɔatrɛw navbar no mu no, nsɛm no bɛda adi sɛnea ɛte wɔ default navbar no mu no.

Yɛsrɛ wo hyɛ no nsow sɛ saa suban yi de ɔhaw bi a ebetumi aba a ɛne overflow—bere a nhyehyɛe overflow-y: auto(a ɛho hia sɛ wobɛtwetwe nsɛm no wɔ ha), overflow-xyɛ nea ɛne auto, a ɛbɛtwitwa nsɛm bi a ɛkɔ soro no yɛ pɛ.

Ɛha na nhwɛsoɔ navbar de di dwuma .navbar-nav-scrollne style="--bs-scroll-height: 100px;", a ebinom extra margin utilities ma optimum spacing.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Suban ahorow a ɛma mmuae

Navbars betumi de .navbar-toggler, .navbar-collapse, ne .navbar-expand{-sm|-md|-lg|-xl|-xxl}adesua ahorow adi dwuma de ahu bere a wɔn nsɛm no bɛhwe ase wɔ bɔtn bi akyi. Sɛ wode nneɛma afoforo ka ho a, ɛnyɛ den sɛ wobɛpaw bere a wobɛkyerɛ anaa wode nneɛma pɔtee bi besie.

Sɛ wopɛ navbars a ɛnhwe ase da a, fa .navbar-expandclass no ka ho wɔ navbar no so. Navbars a ɛhwe ase bere nyinaa no, mfa .navbar-expandadesua biara nka ho.

Toggler a wɔde yɛ nneɛma

Navbar togglers no yɛ benkum-aligned default, nanso sɛ wodi sibling element akyi te sɛ a .navbar-brand, wɔbɛfa wɔn ho akɔ nifa so koraa. Sɛ wodan wo markup no a, ɛbɛdan toggler no a wode besi hɔ no. Ase hɔ no yɛ nhwɛso ahorow a ɛfa toggle style ahorow ho.

Bere a .navbar-brandwɔankyerɛ biara wɔ breakpoint ketewaa bi no:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Hidden brand</a>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Bere a wɔakyerɛ brand din wɔ benkum so ne toggler wɔ nifa so:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Na toggler wɔ benkum so na brand din wɔ nifa so:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Nsɛm a ɛwɔ akyi

Ɛtɔ da bi a wopɛ sɛ wode collapse plugin no di dwuma de kanyan container element bi ma content a structurally tra .navbar. Esiane sɛ yɛn plugin no yɛ adwuma wɔ idne data-bs-targetmatching no so nti, ɛno yɛ mmerɛw sɛ wɔbɛyɛ!

Nsɛm a wɔabubu no

Toggleable denam navbar brand no so.

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

Sɛ woyɛ eyi a, yɛhyɛ nyansa sɛ fa JavaScript foforo ka ho na ama wode focus no akɔ nhyehyɛe kwan so akɔ container no mu bere a wɔabue no. Sɛ ɛnte saa a, ɛbɛyɛ sɛ wɔn a wɔde keyboard di dwuma ne wɔn a wɔde mmoa mfiridwuma di dwuma no benya ɔhaw wɔ nsɛm a wɔada no adi foforo no ho - titiriw sɛ ade a wobuee no di toggler no anim wɔ krataa no nhyehyɛe mu a. Yɛsan nso hyɛ nyansa sɛ hwɛ sɛ toggler no wɔ aria-controlsattribute no, twe adwene si idof the content container no so. Wɔ nsusuwii mu no, eyi ma mmoa mfiridwuma a wɔde di dwuma no kwan ma wohuruw tẽẽ fi toggler no mu kɔ container a ɛhwɛ so no so–nanso mmoa a wɔde ma eyi no yɛ mprempren patchy koraa.

Sass

Nneɛma a Ɛsakra

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

Ɛpɔ

Wɔde navbar expand/collapse classes a ɛyɛ mmuaeɛ (sɛ nhwɛsoɔ no, .navbar-expand-lg) ka $breakpointsmap no ho na ɛnam loop so na ɛyɛ wɔ 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;
        }
      }
    }
  }
}