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

ناوبری

ناوبری سربرگ ناوبری در بالای صفحه است:

ناوبری پایه

با استفاده از Bootstrap، ناوبری می‌تواند گسترش یا تا شود، بسته به اندازه صفحه نمایش.

لطفاً از .navbar کلاس برای ایجاد ناوبری استاندارد استفاده می‌کند، سپس کلاس‌های چرخش‌پذیر پاسخگو:.navbar-expand-xxl|xl|lg|md|sm（در دستگاه‌های فوق‌العاده بزرگ، بزرگ، متوسط، کوچک افقی قرار می‌گیرند، یا در صفحه‌های کوچک عمودی قرار می‌گیرند).

برای افزودن لینک به ناوبری استفاده کنید: "navbar-nav" کلاس <ul> عنصر (یا <div>()). سپس به آن .nav-item کلاس <li> عنصر، دنبال‌کننده .nav-link کلاس <a> عنصر:

مثال

<!-- ناوبری افقی خاکستری در صفحه‌های کوچک به عمودی تبدیل می‌شود -->
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <!-- لینک‌ها -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">لینک 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">لینک 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">لینک 3</a>
      </li>
    </ul>
  </div>
</nav>

آزمایش کنید

ناوبری عمودی

حذف .navbar-expand-* کلاس برای ایجاد ناوبری همیشه عمودی استفاده می‌کند:

مثال

<!-- ناوبری عمودی خاکستری -->
<nav class="navbar bg-light">
  ...
</nav>

آزمایش کنید

ناوبری در وسط

افزودن .justify-content-center کلاس ناوبری را در وسط قرار می‌دهد:

مثال

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav>

آزمایش کنید

ناوبری رنگی

از هر .bg-color کلاس برای تغییر رنگ پس‌زمینه ناوبری استفاده کنید:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

توضیح:لطفاً از .navbar-dark رنگ متن همه لینک‌های ناوبری را سفید می‌کند، یا می‌توانید از .navbar-light رنگ متن را به سیاه تغییر دهید.

مثال

<!-- رنگ خاکستری با متن سفید -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        活动
      </li>
     <li class="nav-item">
        <a class="nav-link" href="#">لینک</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">لینک</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#">فعال</a>
      </li>
    </ul>
  </div>
</nav>
<a class="nav-link disabled" href="#">غیرفعال</a>
<!-- پس‌زمینه سیاه، متن سفید -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- پس‌زمینه آبی، متن سفید -->

آزمایش کنید

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>وضعیت فعال/غیرفعال: .active به <a> عنصر می‌تواند لینک فعلی را برجسته کند یا .disabled کلاس برای نشان دادن لینک‌های غیرقابل کلیک استفاده می‌شود.

برند / لوگوی

.navbar-brand از کلاس برای برجسته کردن نام برند/لوگوی/عنوان صفحه استفاده کنید:

مثال

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>

آزمایش کنید

اگر .navbar-brand وقتی کلاس با تصویر استفاده می‌شود، Bootstrap 5 به طور خودکار سبک تصویر را تنظیم می‌کند تا به ناوبری در جهت عمودی سازگار باشد.

مثال

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill"> 
    </a>
  </div>
</nav>

آزمایش کنید

متن ناوبری

لطفاً از .navbar-text کلاس‌های عمودی برای هماهنگی عناصر غیرلینک در ناوبری (مطمئن شوید که حاشیه‌های درست و رنگ متن مناسب هستند).

مثال

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">متن ناوبری</span>
  </div>
</nav>

آزمایش کنید

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

برای ایجاد ناوبری قابل فروکش، از کلاس‌های تنظیم‌شده class="navbar-toggler"وdata-bs-toggle="collapse" و data-bs-target="#thetarget" محتوای ناوبری (لینک‌ها و غیره) درون بسته شده class="collapse navbar-collapse" در عناصر <div> که با دکمه‌ها data-bs-target مطابقت id: "thetarget"。

مثال

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">لینک</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">لینک</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">لینک</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

آزمایش کنید

توضیح:شما همچنین می‌توانید .navbar-expand-md کلاس‌ها برای همیشه لینک‌های نوار ناوبری را پنهان کرده و دکمه‌های کلید تغییر وضعیت را نمایش می‌دهند.

نوار ناوبری منوهای کشویی

نوار ناوبری می‌تواند منوهای کشویی را نیز شامل شود:

مثال

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">منو کشویی</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">لینک</a></li>
    <li><a class="dropdown-item" href="#">لینک دیگری</a></li>
    <li><a class="dropdown-item" href="#">لینک سوم</a></li>
  </ul>
</li>

آزمایش کنید

منو و دکمه‌های نوار ناوبری

شما همچنین می‌توانید فرم‌ها را در نوار ناوبری قرار دهید:

مثال

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">لینک</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">لینک</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">لینک</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="جستجو">
        <button class="btn btn-primary" type="button">جستجو</button>
      </form>
    </div>
  </div>
</nav>

آزمایش کنید

ناوبری ثابت شده

ناوبری می‌تواند در بالا یا پایین صفحه ثابت نیز قرار گیرد.

ناوبری ثابت در مکان ثابت مستقل از حرکت صفحه (بالا یا پایین) قابل مشاهده خواهد بود.

.fixed-top این کلاس‌ها باعث می‌شوند که ناوبری در صفحه به صورت ثابت باقی بماندبالا:

مثال

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>

آزمایش کنید

لطفاً از کلاس .fixed-bottom برای نگه داشتن ناوبری در پایین صفحه استفاده کنید:

مثال

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>

آزمایش کنید

لطفاً از .sticky-top این کلاس‌ها باعث می‌شوند که ناوبری در هنگام حرکت به سمت بالا در صفحه به صورت ثابت/باقی ماندن در صفحه باقی بماندبالا.

نکته:این نوع در نسخه‌های IE11 و قدیمی‌تر کار نمی‌کند (آن را به عنوان position:relative()).

مثال

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>

آزمایش کنید