رفتن به محتوای اصلی به پیمایش اسناد بروید
in English

نوار ناوبری

مستندات و نمونه هایی برای هدر ناوبری قدرتمند و پاسخگو Bootstrap، نوار ناوبری. شامل پشتیبانی از نام تجاری، پیمایش، و موارد دیگر، از جمله پشتیبانی از افزونه فروپاشی ما.

چگونه کار می کند

قبل از شروع کار با نوار ناوبری باید بدانید:

  • نوارهای ناوبری برای جمع شدن پاسخگو و کلاس های طرح رنگ نیاز به بسته بندی دارند .navbar..navbar-expand{-sm|-md|-lg|-xl|-xxl}
  • نوارهای ناوبری و محتویات آنها به طور پیش فرض روان هستند. ظرف را تغییر دهید تا عرض افقی آنها را به روش های مختلف محدود کنید.
  • از کلاس‌های کاربردی فاصله و انعطاف‌پذیری ما برای کنترل فاصله و تراز در نوارهای ناوبری استفاده کنید.
  • نوارهای Navbar به طور پیش فرض پاسخگو هستند، اما شما به راحتی می توانید آنها را تغییر دهید تا آن را تغییر دهید. رفتار پاسخگو به افزونه Collapse JavaScript ما بستگی دارد.
  • با استفاده از یک عنصر، دسترسی را تضمین کنید <nav>یا در صورت استفاده از یک عنصر عمومی‌تر مانند یک <div>، یک علامت role="navigation"را به هر نوار ناوبری اضافه کنید تا صریحاً آن را به عنوان یک منطقه شاخص برای کاربران فناوری‌های کمکی شناسایی کنید.
  • مورد فعلی را با استفاده aria-current="page"از صفحه فعلی یا aria-current="true"مورد فعلی در یک مجموعه نشان دهید.
prefers-reduced-motionاثر انیمیشن این مؤلفه به پرسش رسانه بستگی دارد . بخش حرکت کاهش یافته اسناد دسترسی ما را ببینید.

محتوای پشتیبانی شده

نوارهای Navbar با پشتیبانی داخلی از تعداد انگشت شماری از اجزای فرعی ارائه می شوند. در صورت نیاز از بین موارد زیر انتخاب کنید:

  • .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. برای تنظیم این رفتار در صورت نیاز از ابزارهای انعطاف پذیر اضافی استفاده کنید.

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

محتوای خارجی

گاهی اوقات می خواهید از افزونه collapse برای راه اندازی یک عنصر ظرف برای محتوایی استفاده کنید که به طور ساختاری خارج از آن قرار .navbarدارد. از آنجایی که افزونه ما بر روی idو data-bs-targetمطابقت کار می کند، این کار به راحتی انجام می شود!

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

هنگامی که این کار را انجام می‌دهید، توصیه می‌کنیم جاوا اسکریپت اضافی را اضافه کنید تا فوکوس را به صورت برنامه‌ای به محفظه منتقل کنید. در غیر این صورت، کاربران صفحه‌کلید و کاربران فناوری‌های کمکی احتمالاً در یافتن محتوای جدید آشکار شده مشکل خواهند داشت - به‌ویژه اگر ظرفی که باز شده قبل از ضامن‌کننده در ساختار سند باشد. همچنین توصیه می‌کنیم مطمئن شوید که ضامن‌کننده دارای aria-controlsویژگی است، و به idمحفظه محتوا اشاره می‌کند. در تئوری، این به کاربران فناوری کمکی اجازه می‌دهد تا مستقیماً از ضامن‌کننده به محفظه‌ای که کنترل می‌کند بپرند – اما پشتیبانی از آن در حال حاضر کاملاً ناقص است.

خارج از بوم

با افزونه 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;
        }
      }
    }
  }
}