nav-link disabled

bootstrap5.css

bootstrap5.css
.nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: default;
}
bootstrap5.css
.nav-tabs .nav-link.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}
bootstrap5.css
.navbar-light .navbar-nav .nav-link.disabled {
  color: rgba(0, 0, 0, 0.3);
}
bootstrap5.css
.navbar-dark .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.25);
}

html bootstrap5 Sample

ナビゲーション:navと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


  <ul class="nav justify-content-center">
    <!-- 中央寄せ flexbox utilitiesを使う-->
    <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-end


  <!-- デフォルトは左寄せなので、特にclassは用意されていない -->
  <ul class="nav justify-content-end">
    <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>

ナビゲーションを垂直(縦)に並べる:flex-column


  <!-- サイドメニューで使える -->
  <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 disabled" href="#">無効</a></li>
  </ul>

ナビゲーションを縦に並べるli使わないaのみ:flex-column


  <!-- .nav はdisplay: flex を使用しているためaタグでも、リストと同じことができる -->
  <!-- DOM数を少なくという意味では、こちらがいい -->
  <nav class="nav flex-column">
    <a class="nav-link active" href="#">アクティブ</a>
    <a class="nav-link" href="#">リンク</a>
    <a class="nav-link disabled" href="#">無効</a>
  </nav>

ピル型ナビゲーション: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 disabled" href="#">無効</a></li>
  </ul>

ナビゲ―ション項目の幅を調整:nav-fill


  <!-- 幅いっぱいで調整される -->
  <nav class="nav nav-pills nav-fill">
    <a class="nav-item nav-link active" href="#">アクティブ</a>
    <a class="nav-item nav-link" href="#">リンク</a>
    <a class="nav-item nav-link disabled" href="#">無効</a>
  </nav>

ナビゲーション:flex


  <nav class="nav nav-pills flex-column flex-sm-row">
    <a class="flex-sm-fill text-sm-center nav-link active" href="#">アクティブ</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="#">リンク</a>
    <a class="flex-sm-fill text-sm-center nav-link disabled" href="#">無効</a>
  </nav>

js ピル型ナビゲーションドロップダウン:nav-linkとdropdown-toggle


  <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="#" role="button" aria-haspopup="true"
        aria-expanded="false">ドロップダウン</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </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-tabs


  <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="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

js タブ型ナビゲーションドロップダウン:dropdown-toggle


  <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="#" role="button" aria-haspopup="true"
        aria-expanded="false">ドロップダウン</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </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>