in English

Navbar

Документација и примери за моќното, одговорно заглавие за навигација на Bootstrap, лентата за навигација. Вклучува поддршка за брендирање, навигација и повеќе, вклучувајќи поддршка за нашиот приклучок за колапс.

На оваа страница

Како работи

Еве што треба да знаете пред да започнете со лентата за навигација:

Навивачките ленти бараат обвиткување .navbarсо класи .navbar-expand{-sm|-md|-lg|-xl|-xxl}на распаѓање и шема на бои .
Навивачките ленти и нивната содржина се стандардно течни. Променете го садот за да ја ограничите нивната хоризонтална ширина на различни начини.
Користете ги нашите класи за користење на растојание и флексија за контролирање на растојанието и порамнувањето во лентите за навигација.
Navbars стандардно реагираат, но можете лесно да ги измените за да го промените тоа. Одговорното однесување зависи од нашиот приклучок за 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

Врските за навигација на Navbar се надоврзуваат на нашите .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. Користете дополнителни флексибилни алатки по потреба за да го прилагодите ова однесување.

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

Одговорни однесувања

Navbars може да користат .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">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-*класи за да создадеме динамична и флексибилна странична лента за навигација.

Во примерот подолу, за да креирате лента за навигација offcanvas која секогаш се собира низ сите точки на прекин, .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>

За да креирате лента за навигација offcanvas која се проширува во нормална лента за навигација на одредена точка на прекин како што е 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;
        }
      }
    }
  }
}