ناوبری (Navs)

در بوت استرپ، «ناوبری (Navs)» فهرست لینک ها را خوشگل و منظم می کند. «کلاس (Class)» یعنی اسم هایی روی تگ برای استایل. هدف ما ساخت «ناوبری بوت استرپ» افقی، عمودی، تب (Tabs) و پیل (Pills) است.

منوی ناوبری ساده

برای منوی افقی، از .nav روی <ul> استفاده کن. سپس روی هر <li> کلاس .nav-item و روی لینک ها .nav-link بگذار.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">لینک فعال</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">لینک</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">غیرفعال</a>
  </li>
</ul>

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

چینش ناوبری

برای وسط چین از .justify-content-center و برای راست چین از .justify-content-end کنار .nav استفاده کن.

<!-- وسط چین -->
<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link" href="#">خانه</a>
  </li>
</ul>
<!-- راست چین -->
<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link" href="#">تماس</a>
  </li>
</ul>

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

ناوبری عمودی

برای ستون عمودی، کلاس .flex-column را به .nav اضافه کن. آیتم ها زیر هم می آیند.

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">داشبورد</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">پروفایل</a>
  </li>
</ul>

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

تب ها (Tabs)

با .nav-tabs منو را به تب تبدیل کن. لینک فعال، کلاس .active دارد.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">فعال</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">تب 2</a>
  </li>
</ul>

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

پیل ها (Pills)

با .nav-pills تب ها گرد می شوند. ظاهر مثل دکمه دارویی است.

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">فعال</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">آیتم</a>
  </li>
</ul>

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

پهنای مساوی با nav-justified

با .nav-justified پهنای آیتم ها برابر می شود. مثل تقسیم مساوی کیک.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">خانه</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">درباره</a>
  </li>
</ul>
<ul class="nav nav-tabs nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">تب 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">تب 2</a>
  </li>
</ul>

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

پیل با منوی کشویی

می توانی در پیل ها، دراپ داون داشته باشی. از .dropdown و .dropdown-menu کمک بگیر.

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">فعال</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">دراپ داون</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">لینک 1</a></li>
      <li><a class="dropdown-item" href="#">لینک 2</a></li>
      <li><a class="dropdown-item" href="#">لینک 3</a></li>
    </ul>
  </li>
</ul>

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

تب با منوی کشویی

همین الگو را می توان با .nav-tabs داشت. منوی کشویی در یکی از تب ها می آید.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">فعال</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">دراپ داون</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">آیتم 1</a></li>
      <li><a class="dropdown-item" href="#">آیتم 2</a></li>
      <li><a class="dropdown-item" href="#">آیتم 3</a></li>
    </ul>
  </li>
</ul>

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

تب های پویا (Toggleable Tabs)

برای سوییچ محتوا، روی لینک ها data-bs-toggle="tab" بگذار. سپس برای هر تب، یک .tab-pane با id یکتا داخل .tab-content بساز.

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home" role="tab">خانه</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu1" role="tab">منو 1</a>
  </li>
</ul>
<div class="tab-content">
  <div id="home" class="container tab-pane active">
    <p>محتوای خانه</p>
  </div>
  <div id="menu1" class="container tab-pane fade">
    <p>محتوای منو 1</p>
  </div>
</div>

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

پیل های پویا (Toggleable Pills)

مشابه تب ها است. فقط به جای .nav-tabs از .nav-pills و روی لینک ها data-bs-toggle="pill" بگذار.

<ul class="nav nav-pills" role="pillist">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="pill" href="#home1" role="pill">خانه</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu12" role="pill">منو 1</a>
  </li>
</ul>
<div class="tab-content">
  <div id="home1" class="container tab-pane active">
    <p>خانه</p>
  </div>
  <div id="menu12" class="container tab-pane fade">
    <p>منو 1</p>
  </div>
</div>

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

گام های عملی سریع

1. کلاس پایه .nav را اضافه کن.
2. .nav-item و .nav-link را روی لیست بگذار.
3. برای تب ها، .nav-tabs یا برای پیل ها .nav-pills را بیفزا.
4. برای محتوای پویا، از data-bs-toggle و .tab-content استفاده کن.
5. برای پهنای برابر یا چینش، از کلاس های کمکی استفاده کن.

نکته: برای دسترسی پذیری، لینک فعال را واضح مشخص کن. متن لینک ها گویا باشد.

جمع بندی سریع

• ناوبری بوت استرپ با .nav شروع می شود.
• .nav-tabs تب می سازد؛ .nav-pills گرد می کند.
• data-bs-toggle محتوای پویا را جابجا می کند.
• .nav-justified پهنای برابر می دهد.
• چینش با کلاس های Flex سریع تنظیم می شود.

برای ترکیب با «جمع شونده»، به ناوبری بوت استرپ کنار کالپس سر بزن. همچنین نوار ناوبری را بعداً یاد بگیر.

مستند رسمی Navs & Tabs و نمونه های Dropdowns را هم مرور کن.