in English

Навигационна лента

Документация и примери за мощната, бърза навигация на Bootstrap, навигационната лента. Включва поддръжка за брандиране, навигация и други, включително поддръжка за нашия плъгин за свиване.

На тази страница

Как работи

Ето какво трябва да знаете, преди да започнете с навигационната лента:

Навигационните ленти изискват обвиване .navbarс класове .navbar-expand{-sm|-md|-lg|-xl|-xxl}за адаптивно свиване и цветова схема .
Навигационните ленти и тяхното съдържание са плавни по подразбиране. Променете контейнера, за да ограничите хоризонталната им ширина по различни начини.
Използвайте нашите помощни класове за интервали и flex за контролиране на разстоянието и подравняването в рамките на навигационните ленти.
Навигационните ленти реагират по подразбиране, но можете лесно да ги промените, за да промените това. Отзивчивото поведение зависи от нашия плъгин Collapse JavaScript.
Осигурете достъпност, като използвате <nav>елемент или, ако използвате по-генеричен елемент като <div>, добавете role="navigation"към всяка навигационна лента, за да я идентифицирате изрично като ориентировъчна област за потребителите на помощни технологии.
Посочете текущия елемент, като използвате aria-current="page"за текущата страница или aria-current="true"за текущия елемент в комплект.

Анимационният ефект на този компонент зависи от prefers-reduced-motionмедийната заявка. Вижте раздела за намалено движение в нашата документация за достъпност .

Поддържано съдържание

Navbars идват с вградена поддръжка за шепа подкомпоненти. Изберете от следните според нуждите:

.navbar-brandза името на вашата компания, продукт или проект.
.navbar-navза пълна и лека навигация (включително поддръжка за падащи менюта).
.navbar-togglerза използване с нашия плъгин за свиване и други поведения за превключване на навигацията .
Помощни програми за гъвкавост и интервали за всякакви контроли и действия на формуляри.
.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">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.1/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.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

Връзките за навигация в лентата за навигация се основават на нашите .navопции със собствен клас модификатор и изискват използването на класове за превключване за правилен отзивчив стил. Навигацията в навигационните ленти също ще нарасне, за да заема възможно най-много хоризонтално пространство, за да поддържа съдържанието на вашата навигационна лента сигурно подравнено.

Добавете .activeкласа, за .nav-linkда посочите текущата страница.

Моля, обърнете внимание, че трябва също да добавите aria-currentатрибута към активния .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>

И тъй като използваме класове за нашите навигации, можете да избегнете изцяло базирания на списък подход, ако желаете.

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

Можете също да използвате падащи менюта в лентата за навигация. Падащите менюта изискват обвиващ елемент за позициониране, така че не забравяйте да използвате отделни и вложени елементи за .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>

Контейнери

Въпреки че не е задължително, можете да обвиете лентата за навигация в , за .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">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-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">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">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">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контейнера със съдържание. На теория това позволява на потребителите на помощни технологии да прескачат директно от превключвателя към контейнера, който той контролира, но поддръжката за това в момента е доста неравномерна.

Offcanvas

Преобразувайте вашата разширяваща се и свиваща се навигационна лента в чекмедже offcanvas с приставката offcanvas. Ние разширяваме стиловете по подразбиране offcanvas и използваме нашите .navbar-expand-*класове, за да създадем динамична и гъвкава странична лента за навигация.

В примера по-долу, за да създадете навигационна лента извън платното, която винаги е свита във всички точки на прекъсване, пропуснете .navbar-expand-*изцяло класа.

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

За да създадете навигационна лента извън платно, която се разширява в нормална навигационна лента при конкретна точка на прекъсване lg, .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>

дързък

Променливи

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

        .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;
        }
      }
    }
  }
}