Навігацыйная панэль

Дакументацыя і прыклады для магутнага, адаптыўнага навігацыйнага загалоўка Bootstrap, панэлі навігацыі. Уключае падтрымку брэндынгу, навігацыі і іншага, у тым ліку падтрымку нашага плагіна для згортвання.

На гэтай старонцы

Як гэта працуе

Вось што вам трэба ведаць, перш чым пачаць працу з панэллю навігацыі:

Панэлі навігацыі патрабуюць абгорткі .navbarдля адаптыўнага згортвання .navbar-expand{-sm|-md|-lg|-xl|-xxl}і класаў каляровай схемы .
Панэлі навігацыі і іх змесціва плыўныя па змаўчанні. Змяняйце кантэйнер , каб абмежаваць іх гарызантальную шырыню рознымі спосабамі.
Выкарыстоўвайце нашы ўтыліты spacing і flex для кіравання інтэрвалам і выраўноўваннем у панэлях навігацыі.
Панэлі навігацыі спагадныя па змаўчанні, але вы можаце лёгка змяніць іх, каб змяніць гэта. Адказныя паводзіны залежаць ад нашага плагіна Collapse JavaScript.
Забяспечце даступнасць з дапамогай <nav>элемента або, калі выкарыстоўваецца больш агульны элемент, напрыклад <div>, дадайце role="navigation"да кожнай навігацыйнай панэлі, каб яўна вызначыць яе як арыенцір для карыстальнікаў дапаможных тэхналогій.
Пазначце бягучы элемент, выкарыстоўваючы aria-current="page"для бягучай старонкі або aria-current="true"для бягучага элемента ў наборы.

Анімацыйны эфект гэтага кампанента залежыць ад prefers-reduced-motionмедыя-запыту. Глядзіце раздзел аб паменшаным руху нашай дакументацыі па спецыяльных магчымасцях .

Падтрымоўваны кантэнт

Navbars пастаўляецца з убудаванай падтрымкай некалькіх падкампанентаў. Пры неабходнасці выбірайце з наступнага:

.navbar-brandдля вашай кампаніі, прадукту або назвы праекта.
.navbar-navдля паўнавартаснай і лёгкай навігацыі (уключаючы падтрымку выпадаючых спісаў).
.navbar-togglerдля выкарыстання з нашым убудовай для згортвання і іншымі спосабамі пераключэння навігацыі .
Утыліты Flex і інтэрвалаў для любых элементаў кіравання формамі і дзеянняў.
.navbar-textдля дадання вертыкальна адцэнтраваных радкоў тэксту.
.collapse.navbar-collapseдля групоўкі і хавання змесціва панэлі навігацыі па бацькоўскай кропцы супыну.
Дадайце опцыю .navbar-scrollдля ўстаноўкі max-heightі пракруткі пашыранага змесціва панэлі навігацыі .

Вось прыклад усіх падкампанентаў, уключаных у адаптыўную светлавую навігацыйную панэль, якая аўтаматычна згортваецца ў lg(вялікай) кропцы перапынку.

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

У гэтым прыкладзе выкарыстоўваюцца класы ўтыліт фону ( bg-light) і інтэрвалу ( my-2, my-lg-0, me-sm-0, ).my-sm-0

Марка

.navbar-brandМожна прымяніць да большасці элементаў, але якар працуе лепш за ўсё, бо для некаторых элементаў могуць спатрэбіцца службовыя класы або ўласныя стылі .

Тэкст

Дадайце тэкст у элемент з .navbar-brandкласам.

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

Малюнак

Вы можаце замяніць тэкст .navbar-brandу <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>

Малюнак і тэкст

Вы таксама можаце выкарыстоўваць некаторыя дадатковыя ўтыліты, каб дадаць малюнак і тэкст адначасова. Звярніце ўвагу на даданне .d-inline-blockі .align-text-topна <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>

Нав

Спасылкі навігацыі Navbar абапіраюцца на нашы .navпараметры з іх уласным класам-мадыфікатарам і патрабуюць выкарыстання класаў -пераключальнікаў для правільнага адаптыўнага стылю. Навігацыя ў панэлі навігацыі таксама будзе пашырацца, каб займаць як мага больш гарызантальнай прасторы, каб змесціва панэлі навігацыі было надзейна выраўнавана.

Дадайце .activeклас, .nav-linkкаб паказаць бягучую старонку.

Калі ласка, звярніце ўвагу, што вы таксама павінны дадаць aria-currentатрыбут у active .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>

І паколькі мы выкарыстоўваем класы для нашых навігацый, вы можаце цалкам пазбегнуць падыходу на аснове спісаў, калі хочаце.

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

Вы таксама можаце выкарыстоўваць выпадальныя спісы на панэлі навігацыі. Для размяшчэння выпадаючых меню патрабуецца элемент абгорткі, таму абавязкова выкарыстоўвайце асобныя і ўкладзеныя элементы для .nav-itemі .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="#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>

Формы

Размясціце розныя элементы кіравання формамі і кампаненты ў панэлі навігацыі:

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

Непасрэдныя даччыныя элементы .navbarвыкарыстоўваюць гнуткі макет і па змаўчанні будуць justify-content: space-between. Пры неабходнасці выкарыстоўвайце дадатковыя ўтыліты flex , каб наладзіць гэтыя паводзіны.

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

Групы ўводу таксама працуюць. Калі ваша навігацыйная панэль уяўляе сабой цэлую форму або ў асноўным форму, вы можаце выкарыстоўваць <form>элемент у якасці кантэйнера і захаваць трохі HTML.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

Розныя кнопкі таксама падтрымліваюцца як частка гэтых формаў панэлі навігацыі. Гэта таксама выдатны напамін аб тым, што ўтыліты вертыкальнага выраўноўвання можна выкарыстоўваць для выраўноўвання элементаў рознага памеру.

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

Тэкст

Панэлі навігацыі могуць утрымліваць фрагменты тэксту з дапамогай .navbar-text. Гэты клас рэгулюе вертыкальнае выраўноўванне і гарызантальны інтэрвал для радкоў тэксту.

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

Пры неабходнасці змешвайце і спалучайце з іншымі кампанентамі і ўтылітамі.

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

Каляровыя схемы

Тэматызацыя панэлі навігацыі ніколі не была прасцейшай дзякуючы камбінацыі тэматычных класаў і background-colorўтыліт. Выберыце .navbar-lightдля выкарыстання са светлымі колерамі фону або .navbar-darkдля выкарыстання з цёмнымі колерамі фону. Затым наладзьце з дапамогай .bg-*утыліт.

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

Кантэйнеры

Нягледзячы на тое, што гэта не абавязкова, вы можаце абгарнуць навігацыйную панэль у a .container, каб размясціць яе па цэнтры старонкі, але звярніце ўвагу, што ўнутраны кантэйнер усё яшчэ патрабуецца. Ці вы можаце дадаць кантэйнер унутры, .navbarкаб толькі цэнтраваць змесціва фіксаванай або статычнай верхняй навігацыйнай панэлі .

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

Выкарыстоўвайце любы адаптыўны кантэйнер, каб змяніць шырыню прадстаўлення змесціва на панэлі навігацыі.

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

Размяшчэнне

Выкарыстоўвайце нашы ўтыліты размяшчэння, каб размясціць панэлі навігацыі ў нестатычных пазіцыях. Выбірайце паміж замацаванымі ўверсе, замацаванымі ўнізе або прылепленымі да верху (пракручваецца разам са старонкай, пакуль не дасягне верху, потым застаецца там). Фіксаваныя панэлі навігацыі выкарыстоўваюць position: fixed, што азначае, што яны выцягнуты з нармальнага ходу DOM і могуць патрабаваць карыстальніцкага CSS (напрыклад, padding-topна <body>), каб прадухіліць накладанне з іншымі элементамі.

Таксама звярніце ўвагу, што .sticky-topвыкарыстоўвае position: sticky, які не цалкам падтрымліваецца ва ўсіх браўзерах .

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

Пракрутка

Дадайце .navbar-nav-scrollў .navbar-nav(ці іншы падкампанент навігацыйнай панэлі), каб уключыць вертыкальную пракрутку змесціва згорнутай навігацыйнай панэлі, якое можна пераключаць. Па змаўчанні пракрутка пачынаецца на 75vh(або 75% вышыні акна прагляду), але вы можаце перавызначыць гэта з дапамогай лакальнай карыстальніцкай уласцівасці CSS --bs-navbar-heightабо карыстацкіх стыляў. У вялікіх акнах прагляду, калі навігацыйная панэль разгорнута, змесціва будзе адлюстроўвацца так, як на стандартнай навігацыйнай панэлі.

Калі ласка, звярніце ўвагу, што такія паводзіны звязаны з патэнцыйным недахопам overflow— калі налада overflow-y: auto(неабходна пракручваць змесціва тут) overflow-xз'яўляецца эквівалентам auto, што абразае некаторы гарызантальнае змесціва.

Вось прыклад навігацыйнай панэлі з выкарыстаннем .navbar-nav-scrollз style="--bs-scroll-height: 100px;"некаторымі дадатковымі ўтылітамі поля для аптымальнага інтэрвалу.

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

Спагадныя паводзіны

Панэлі навігацыі могуць выкарыстоўваць класы .navbar-toggler, .navbar-collapse, і .navbar-expand{-sm|-md|-lg|-xl|-xxl}, каб вызначыць, калі іх змест згортваецца за кнопкай. У спалучэнні з іншымі ўтылітамі вы можаце лёгка выбраць, калі паказваць або хаваць пэўныя элементы.

Для панэлі навігацыі, якія ніколі не згортваюцца, дадайце .navbar-expandклас на панэлі навігацыі. Для панэлі навігацыі, якія заўсёды згортваюцца, не дадавайце .navbar-expandклас.

Пераключальнік

Пераключальнікі Navbar па змаўчанні выраўнаваны па левым краі, але калі яны ідуць за роднасным элементам, такім як .navbar-brand, яны аўтаматычна будуць выраўнаваны па правым краі. Змена вашай разметкі зменіць размяшчэнне пераключальніка. Ніжэй прыведзены прыклады розных стыляў пераключэння.

Без .navbar-brandпаказу ў найменшай кропцы перапынку:

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

З назвай брэнда, паказанай злева, і пераключальнікам справа:

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

З пераключальнікам злева і назвай брэнда справа:

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

Знешні кантэнт

Часам вы хочаце выкарыстаць плагін згортвання, каб запусціць элемент кантэйнера для кантэнту, які структурна знаходзіцца па-за межамі .navbar. Паколькі наш убудова працуе на idі data-bs-targetсупастаўленні, гэта лёгка зрабіць!

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>

Калі вы зробіце гэта, мы рэкамендуем уключыць дадатковы JavaScript для праграмнага перамяшчэння фокуса на кантэйнер пры яго адкрыцці. У адваротным выпадку карыстальнікам клавіятуры і дапаможным тэхналогіям, хутчэй за ўсё, будзе цяжка знайсці нядаўна адкрыты кантэнт - асабліва калі кантэйнер, які быў адкрыты, знаходзіцца перад пераключальнікам у структуры дакумента. Мы таксама рэкамендуем пераканацца, што пераключальнік мае aria-controlsатрыбут, які паказвае на idкантэйнер змесціва. Тэарэтычна гэта дазваляе карыстальнікам дапаможных тэхналогій пераходзіць непасрэдна ад пераключальніка да кантэйнера, якім ён кіруе, але падтрымка гэтага ў цяперашні час даволі неадназначная.

Сас

Пераменныя

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

Пятля

Адаптыўныя класы разгортвання/згортвання панэлі навігацыі (напрыклад, .navbar-expand-lg) аб'ядноўваюцца з $breakpointsкартай і ствараюцца праз цыкл у 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;
        }
      }
    }
  }
}