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

نوار ناوبری

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

در این صفحه

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

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

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

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

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

  • .navbar-brandبرای نام شرکت، محصول یا پروژه شما.
  • .navbar-navبرای ناوبری تمام قد و سبک وزن (از جمله پشتیبانی از کشویی).
  • .navbar-togglerبرای استفاده با افزونه فروپاشی ما و سایر رفتارهای تغییر مسیریابی .
  • ابزارهای انعطاف‌پذیر و فاصله‌گذاری برای هر نوع کنترل و عملکرد.
  • .navbar-textبرای افزودن رشته های متنی در مرکز عمودی.
  • .collapse.navbar-collapseبرای گروه بندی و پنهان کردن محتویات نوار ناوبری توسط یک نقطه شکست والد.
  • یک گزینه اختیاری .navbar-scrollبرای تنظیم max-heightو پیمایش محتوای نوار ناوبری گسترده اضافه کنید .

در اینجا یک نمونه از تمام اجزای فرعی موجود در یک نوار ناوبری با موضوع نور پاسخگو است که به طور خودکار در lgنقطه شکست (بزرگ) جمع می شود.

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <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" role="search">
        <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) و فاصله ( me-auto, mb-2, mb-lg-0, ) استفاده می کند.me-2

نام تجاری

.navbar-brandمی توان آن را برای اکثر عناصر اعمال کرد، اما یک لنگر بهترین عملکرد را دارد، زیرا برخی از عناصر ممکن است به کلاس های کاربردی یا سبک های سفارشی نیاز داشته باشند .

متن

متن خود را در یک عنصر با .navbar-brandکلاس اضافه کنید.

html 
<!-- As a link -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

تصویر

می توانید متن داخل را .navbar-brandبا یک جایگزین کنید <img>.

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

تصویر و متن

همچنین می توانید از برخی ابزارهای کمکی اضافی برای افزودن تصویر و متن به طور همزمان استفاده کنید. به افزودن .d-inline-blockو .align-text-topروی <img>.

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

پیوندهای پیمایش نوار ناوبری بر روی .navگزینه‌های ما با کلاس اصلاح‌کننده خاص خود ساخته شده‌اند و برای استایل واکنش‌گرای مناسب نیاز به استفاده از کلاس‌های تغییردهنده دارند. پیمایش در نوارهای ناوبری نیز به گونه ای افزایش می یابد که تا حد امکان فضای افقی را اشغال کند تا محتویات نوار ناوبری شما به طور ایمن تراز شود.

برای نشان دادن صفحه فعلی ، .activeکلاس را اضافه کنید ..nav-link

لطفاً توجه داشته باشید که باید aria-currentویژگی را در قسمت فعال نیز اضافه کنید .nav-link.

html 
<nav class="navbar navbar-expand-lg 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>

و از آنجایی که ما از کلاس‌ها برای ناوبری خود استفاده می‌کنیم، در صورت تمایل می‌توانید از رویکرد مبتنی بر فهرست به طور کامل اجتناب کنید.

html 
<nav class="navbar navbar-expand-lg 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مطابق شکل زیر استفاده کنید.

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu">
            <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>

تشکیل می دهد

کنترل‌های فرم و اجزای مختلف را در نوار ناوبری قرار دهید:

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <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. برای تنظیم این رفتار در صورت نیاز از ابزارهای انعطاف پذیر اضافی استفاده کنید.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <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 ذخیره کنید.

html 
<nav class="navbar 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>

دکمه های مختلفی نیز به عنوان بخشی از این فرم های نوار ناوبری پشتیبانی می شوند. این همچنین یک یادآوری عالی است که از ابزارهای تراز عمودی می توان برای تراز کردن عناصر با اندازه های مختلف استفاده کرد.

html 
<nav class="navbar 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. این کلاس تراز عمودی و فاصله افقی را برای رشته های متن تنظیم می کند.

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

در صورت نیاز با سایر اجزا و ابزارهای کاربردی ترکیب و مطابقت دهید.

html 
<nav class="navbar navbar-expand-lg 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>

طرح های رنگی

جدید در نسخه 5.2.0: قالب نوار ناوبری اکنون توسط متغیرهای CSS پشتیبانی می شود و .navbar-lightمنسوخ شده است. متغیرهای CSS به صورت .navbarپیش‌فرض در ظاهر «light» اعمال می‌شوند و می‌توان آن‌ها را با آن لغو کرد .navbar-dark.

به لطف ترکیب Bootstrap از متغیرهای Sass و CSS، تم‌های نوار ناوبری آسان‌تر از همیشه هستند. پیش‌فرض «نوار ناوبری روشن» ما برای استفاده با رنگ‌های پس‌زمینه روشن است، اما می‌توانید .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" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

ظروف

اگرچه نیازی به آن نیست، می‌توانید نوار ناوبری را در یک بپیچید .containerتا آن را در مرکز صفحه قرار دهید – هرچند توجه داشته باشید که یک ظرف داخلی همچنان مورد نیاز است. یا می توانید ظرفی را در داخل آن اضافه کنید .navbarتا فقط محتویات نوار ناوبری ثابت یا ثابت بالا را در مرکز قرار دهید .

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

از هر یک از کانتینرهای پاسخگو برای تغییر میزان گسترده نمایش محتوا در نوار ناوبری خود استفاده کنید.

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

تعیین سطح

از ابزارهای موقعیت ما برای قرار دادن نوارهای ناوبری در موقعیت های غیر ایستا استفاده کنید. از ثابت به بالا، ثابت به پایین، چسبیده به بالا (با صفحه پیمایش می‌کند تا به بالا می‌رسد، سپس در آنجا می‌ماند) یا چسبیده به پایین (با صفحه پیمایش می‌کند تا به پایین برسد، سپس می‌ماند) را انتخاب کنید. آنجا).

نوارهای ناوبری ثابت استفاده می‌کنند position: fixed، به این معنی که از جریان عادی DOM خارج می‌شوند و ممکن است برای جلوگیری از همپوشانی با عناصر دیگر ، به CSS سفارشی (مثلاً padding-topروی ) نیاز داشته باشند.<body>

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
html 
<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
html 
<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
html 
<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>
html 
<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</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;"، با برخی ابزارهای حاشیه اضافی برای فاصله بهینه آورده شده است.

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu">
            <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" role="search">
        <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نشان داده شده در کوچکترین نقطه شکست:

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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>

با نام تجاری نشان داده شده در سمت چپ و تغییر دهنده در سمت راست:

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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>

با یک ضامن در سمت چپ و نام تجاری در سمت راست:

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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مطابقت کار می کند، این کار به راحتی انجام می شود!

html 
<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-*کلاس را به طور کامل حذف کنید.

html 
<nav class="navbar 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" 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu">
              <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" role="search">
          <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-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>

هنگام استفاده از offcanvas در نوار ناوبری تاریک، توجه داشته باشید که ممکن است برای جلوگیری از ناخوانا شدن متن، نیاز به داشتن پس‌زمینه تیره در محتوای offcanvas داشته باشید. در مثال زیر، .navbar-darkو .bg-darkبه .navbar, .text-bg-darkبه .offcanvas, و .dropdown-menu-darkto را اضافه می کنیم تا یک استایل مناسب با یک offcanvas تیره داشته باشیم..dropdown-menu.btn-close-white.btn-close

html 
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <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" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

CSS

متغیرها

اضافه شده در نسخه 5.2.0

به عنوان بخشی از رویکرد متغیرهای CSS در حال تکامل Bootstrap، نوارهای ناوبری اکنون از متغیرهای CSS محلی .navbarبرای سفارشی‌سازی در زمان واقعی استفاده می‌کنند. مقادیر برای متغیرهای CSS از طریق Sass تنظیم می‌شوند، بنابراین سفارشی‌سازی Sass نیز همچنان پشتیبانی می‌شود.

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

برخی از متغیرهای اضافی CSS نیز در موارد زیر وجود دارند .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

سفارشی سازی از طریق متغیرهای CSS را می توان در .navbar-darkکلاسی مشاهده کرد که در آن مقادیر خاصی را بدون افزودن انتخابگرهای تکراری CSS لغو می کنیم.

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

متغیرهای Sass

متغیرها برای همه نوارهای ناوبری:

$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-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-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-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

حلقه Sass

کلاس های گسترش/کوچک کردن نوار ناوبری پاسخگو (به عنوان مثال، .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: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}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 {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

          .offcanvas-body {
            display: flex;
            flex-grow: 0;
            padding: 0;
            overflow-y: visible;
          }
        }
      }
    }
  }
}