📌 در بوت‌استرپ برای ساخت منوهای ناوبری (Navs) می‌تونی از کلاس‌های آماده استفاده کنی. این منوها می‌تونن ساده، افقی، عمودی یا همراه با تب (Tabs) باشن.

✅ Nav ساده (افقی پیش‌فرض)

<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" href="#">خدمات</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">غیرفعال</a>
  </li>
</ul>

✅ 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>
  <li class="nav-item">
    <a class="nav-link" href="#">تماس با ما</a>
  </li>
</ul>

✅ Nav وسط‌چین و راست‌چین

<ul class="nav justify-content-center">
  <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 justify-content-end mt-3">
  <li class="nav-item">
    <a class="nav-link" href="#">تماس</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">خدمات</a>
  </li>
</ul>

✅ Nav به شکل Tabs

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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>

✅ 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>
  <li class="nav-item">
    <a class="nav-link" href="#">پروفایل</a>
  </li>
</ul>

✅ Nav Pills با استایل عمودی

<ul class="nav nav-pills 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>
  <li class="nav-item">
    <a class="nav-link" href="#">تنظیمات</a>
  </li>
</ul>

📌 نکته: برای تعاملات پیشرفته‌تر (مثل نمایش محتوای تب‌ها) باید از Tabs JavaScript در بوت‌استرپ استفاده کنی.