نوار ناوبری (Navbar)

در بوت استرپ، «نوار ناوبری (Navbar)» هدر راهبری صفحه است. «کلاس (Class)» یعنی برچسبی برای استایل. هدف ما ساخت «نوار ناوبری بوت استرپ» واکنش گرا، عمودی، رنگی، با برند و منوی جمع شونده است.

نوار ناوبری پایه (Basic Navbar)

با .navbar شروع کن. سپس یکی از .navbar-expand-* را بگذار تا روی اندازه های خاص باز بماند.

<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">
  <div class="container-fluid">
    <ul class="nav 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

برای وسط چین، .justify-content-center را کنار کلاس ها بگذار.

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">لینک</a>
    </li>
  </ul>
</nav>

مشاهده در ادیتور

رنگ ها و کنتراست Navbar

پس زمینه را با .bg-* تغییر بده. رنگ متن لینک ها را با .navbar-light یا .navbar-dark تعیین کن.

<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">فعال</a>
      </li>
    </ul>
  </div>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">لینک</a>
      </li>
    </ul>
  </div>
</nav>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">لینک</a>
      </li>
    </ul>
  </div>
</nav>

مشاهده در ادیتور

برند / لوگو

کلاس .navbar-brand نام یا لوگوی پروژه را برجسته می کند.

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

مشاهده در ادیتور

اگر تصویر استفاده می کنی، بوت استرپ آن را عمودی هماهنگ می کند.

<nav class="navbar bg-dark navbar-dark navbar-expand-sm">
  <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>

مشاهده در ادیتور

نوار ناوبری جمع شونده (Collapsible)

در موبایل، لینک ها را مخفی کن و با «دکمه برگر» نمایش بده. از .navbar-toggler و بخش .collapse.navbar-collapse با id یکسان استفاده کن.

<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>
      </ul>
    </div>
  </div>
</nav>

مشاهده در ادیتور

گام های سریع راه اندازی

1. کلاس های پایه .navbar و ظرف .container-fluid را بگذار.
2. لینک ها را داخل .navbar-nav و آیتم ها را .nav-item قرار بده.
3. برای موبایل، دکمه .navbar-toggler و بخش .collapse بساز.
4. برای رنگ، از .bg-* و کنتراست از .navbar-* استفاده کن.
5. برای برند، از .navbar-brand متن یا تصویر بده.

نکته: اگر دکمه کار نمی کند، مقدار data-bs-target با id بخش .collapse یکی باشد.

Navbar ثابت و چسبان

با .fixed-top یا .fixed-bottom موقعیت را ثابت کن. با .sticky-top پس از عبور، بالا می چسبد.

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

مشاهده در ادیتور

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

مشاهده در ادیتور

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

مشاهده در ادیتور

جمع بندی سریع

• شروع با .navbar و یک .navbar-expand-*.
• لینک ها داخل .navbar-nav و .nav-link.
• جمع شونده با دکمه .navbar-toggler و .collapse.
• رنگ با .bg-* و کنتراست با .navbar-dark/.navbar-light.
• ثابت/چسبان با .fixed-top/.fixed-bottom/.sticky-top.

برای منوهای تب و پیل، سر بزن به ناوبری (Navs). برای منوی کشویی داخل نوار ناوبری، بخش دراپ داون ها را ببین.