Bootstrap 5 네비게이션

네비게이션 메뉴

간단한 수평 메뉴를 만들기 위해 .nav 류 추가하려면 <ul> 요소를 추가한 후, 각각에 <li> 요소를 추가합니다 .nav-item 그리고 .nav-link 그들의 링크에 클래스를 추가합니다:

예제

<ul class="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>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">비활성화</a>
  </li>
</ul>

직접 시험해 보세요

네비게이션 패널 정렬

추가 .justify-content-center 클래스는 네비게이션을 가운데 정렬하고 추가 .justify-content-end 클래스는 네비게이션을 오른쪽 정렬합니다.

예제

<!-- 가운데 정렬된 네비게이션 -->
<ul class="nav justify-content-center">
<!-- 오른쪽 정렬된 네비게이션 -->
<ul class="nav justify-content-end">

직접 시험해 보세요

수직 네비게이션 패널

추가 .flex-column 류를 사용하면 수직 네비게이션을 생성할 수 있습니다：

예제

<ul class="nav flex-column">

직접 시험해 보세요

탭

사용하세요 .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="#">링크</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-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>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">비활성화</a>
  </li>
</ul>

직접 시험해 보세요

평행한 탭/胶囊 네비게이션

사용하세요 .nav-justified 류(평행) 정렬 탭/胶囊:

예제

<ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>

직접 시험해 보세요

胶囊 드롭다운 메뉴

예제

<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>
  <li class="nav-item">
    <a class="nav-link" href="#">링크</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">비활성화</a>
  </li>
</ul>

직접 시험해 보세요

탭 드롭다운 메뉴

예제

<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>
  <li class="nav-item">
    <a class="nav-link" href="#">링크</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">비활성화</a>
  </li>
</ul>

직접 시험해 보세요

탈출 가능한 / 동적 탭

탭을 탈출할 수 있도록 data-toggle="tab" 속성을 각 링크에 추가하세요. 그런 다음 각 탭에 유일한 ID를 가진 .tab-pane 류를 추가하고, 그들을 .tab-content 류 추가하려면 <div> 요소에 추가하세요.

탭이 클릭될 때 점진적으로 반짝일 수 있도록 .fade 류 추가하려면 .tab-pane：

예제

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home">홈</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu1">메뉴 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu2">메뉴 2</a>
  </li>
</ul>
<!-- 탭 패널 -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>

직접 시험해 보세요

가切换적 / 동적 캡슐 네비게이션

동일한 코드가 네비게이션에 적용됩니다; data-toggle 속성을 변경하면 됩니다 data-toggle="pill" 즉시:

예제

<!-- 가이드 캡슐 -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="pill" href="#home">봄날</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu1">초여름</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu2">산행</a>
  </li>
</ul>
<!-- 탭 창 패널 -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>

직접 시험해 보세요