نوار ناوبری در Bootstrap 5

نوار ناوبری در Bootstrap 5

 

 

این مقاله شامل مستندات و مثالهایی برای navbar واکنش گرا و قدرتمند Bootstrap است. همچنین شامل راهنمای استفاده از لوگوی تجاری ، ناوبری و موارد دیگر ، از جمله پشتیبانی از افزونه تاشو (collapse plugin) است.

 

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

این مواردی است که شما باید قبل از شروع کار با Navbar بدانید:

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

اثر انیمیشنی این مؤلفه به مدیا کوئری prefers-reduced-motion وابسته است.

 

 

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

 

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

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

در اینجا مثالی ببینید از تمام زیرجزء های موجود در یک نوار واکنش گرا با تم روشن ، که به طور خودکار در نقطه شکست lg (large) فرو می ریزد و جمع می شود:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

این مثال از کلاس های کمکی پس زمینه (bg-light) و فاصله گذاری (my-2, my-lg-0, me-sm-0, my-sm-0) استفاده می کند.

 

 

نشان تجاری یا برند

 

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

 

 

متن

 

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

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

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">clicksite.ir@gmail.com</span>
  </div>
</nav>

 

 

تصویر

 

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

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

 

 

تصویر و متن

 

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

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

 

 

ناوبری

 

پیوندهای ناوبری در Navbar بر اساس گزینه های nav.  و کلاس های اصلاح کننده آن ساخته شده و نیاز به استفاده از کلاسهای چرخشی برای اعمال استایل واکنش گرای مناسب دارد. همچنین پیوندهای ناوبری در Navbar برای استفاده از حداکثر فضای افقی و برای حفظ هماهنگی مناسب بین محتویات Navbar ، گسترش می یابد.

 

برای نشان دادن صفحه فعلی ، کلاس 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

 

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </div>
    </div>
  </div>
</nav>

 

همچنین می توانید از کشویی ها در نوار ناوبری خود استفاده کنید. منوهای کشویی برای موقعیت یابی به یک عنصر بیرونی (محفظه) نیاز دارند ، بنابراین حتماً از عناصر جداگانه و تو در تو برای  nav-item. و nav-link. مانند کد زیر استفاده کنید.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

 

 

فرم ها

 

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

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

 

اولین عنصر فرزند  navbar. از طرح بندی انعطاف پذیر flex  استفاده می کند و  به طور پیش فرض دارای ویژگی space-between برای justify-content هستد. در صورت نیاز برای تعدیل این رفتار می توانید از ابزارهای اضافی flex استفاده کنید.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

 

استفاده از گروه های ورودی (Input group) نیز قابل استفاده است. اگر Navbar شما یک فرم کامل یا بیشتر یک فرم است ، می توانید از عنصر <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>

 

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

<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">
      Clicksite (clicksite.ir@gmail.com)
    </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">
        Clicksite
      </span>
    </div>
  </div>
</nav>

 

 

طرح های رنگی

 

به دلیل فراهم شدن امکان استفاده از کلاسهای کمکی و ابزارهای رنگ پس زمینه ، تغییر تم نوار ناوبری هرگز به سادگی امروز نبوده است. می توانید از بین  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.) قرار دهید تا در مرکز صفحه قرار گیرد- البته توجه داشته باشید که هنوز یک محفظه داخلی (inner container) لازم است. یا می توانید محفظه (container) را در داخل  navbar.  اضافه کنید تا فقط محتویات یک نوار ثابت را در مرکز قرار دهید.

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Clicksite (clicksite.ir@gmail.com)</a>
    </div>
  </nav>
</div>

 

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-md">
    <a class="navbar-brand" href="#"> Clicksite (clicksite.ir@gmail.com)</a>
  </div>
</nav>

 

 

جا یابی

 

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

همچنین توجه داشته باشید که  sticky-top.  از position:sticky استفاده می کند که به طور کامل در هر مرورگری پشتیبانی نمی شود.

 

• Default:

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>

 

• Fixed Top:

<nav class="navbar fixed-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>

 

• Fixed bottom:

<nav class="navbar fixed-bottom navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>

 

• Sticky top:

<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.  (یا سایر مؤلفه های فرعی navbar) اضافه کنید تا پیمایش عمودی را در محتوای قابل تغییر در نوارپیمایش جمع شده (collapsed) فعال کنید. به طور پیش فرض ، پیمایش در 75vh (یا 75٪ از ارتفاع viewport) شروع می شود ، اما می توانید این ویژگی را با خاصیت سفارشی  bs-navbar-height--  یا استایل های سفارشی تغییر دهید. در نمای (viewport) بزرگتر ، وقتی نوار پیمایش گسترش می یابد ، محتوای آن همانند حالت پیش فرض در نوارپیمایش ظاهر می شود.

 

لطفاً توجه داشته باشید که این رفتار با اشکال احتمالی سرریز (overflow) همراه است - هنگام تنظیم overflow-y: auto (برای پیمایش محتوا در اینجا لازم است) ، overflow-x معادل auto است ، که مقداری از محتوای افقی را برش می دهد.

 

در اینجا یک مثال navbar با استفاده از  navbar-nav-scroll. با bs-scroll-height:100px-- وجود دارد ، با برخی فضای حاشیه ای اضافی برای فاصله بهینه.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

 

 

رفتارهای واکنشی

 

نوارهای ناوبری می توانند از کلاسهای  navbar-toggler. و  navbar-collapse. و  navbar-expand{-sm|-md|-lg|-xl|-xxl}.  برای تعیین زمان فروپاشی محتوای آنها با یک دکمه استفاده کنند. در ترکیب با ابزارهای دیگر ، به راحتی می توانید زمان نمایش یا پنهان کردن عناصر خاص را انتخاب کنید.

 

برای نوارهای ناوبری که هرگز جمع نمی شوند، کلاس navbar-expand. را در نوار ناوبری اضافه کنید. برای نوارهای ناوبری  که همیشه جمع می شوند ، هیچ کلاس  navbar-expand. ی اضافه نکنید.

 

 

دکمه های تبدیل

 

دکمه های تبدیل Navbar به طور پیش فرض تراز چپ هستند ، اما اگر پس از یک عنصر همزاد مانند navbar-brand.  باشند ، به طور خودکار در انتهای سمت راست تراز می شوند. با این حال معکوس کردن نشان گذاری های html ، موقعیت آن را نیز معکوس می کند. در زیر نمونه هایی از استایل های مختلف این دکمه وجود دارد.

 

• بدون نمایش .navbar-brand در کوچکترین نقطه شکست آن:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Hidden brand</a>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

 

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

 

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

 

 

محتوای خارجی

 

بعضی اوقات می خواهید از افزونه collapse  استفاده کنید تا یک عنصر محفظه ای (container element) را برای محتوایی که از لحاظ ساختاری در خارج از navbar قرار دارد ، باز و بسته کند. از آنجا که افزونه ما بر اساس شناسه آیدی و تطبیق 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 باشد و به شناسه (آیدی) محتوای محفظه باز شونده اشاره کند. از نظر تئوری ، این به کاربران فناوری کمکی اجازه می دهد تا مستقیماً از دکمه باز کردن به محفظه ای که باز شده است بپرند- اما پشتیبانی از این امر در حال حاضر کاملاً جزئی است.

 

 

استفاده از ساس

 

• متغیرها:

$navbar-padding-y:                  $spacer / 2;
$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) / 2;
$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;

 

• حلقه

در کد زیر کلاس های Responsive navbar expand/collapse  مثلاً  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;
        }
      }
    }
  }
}