[Bootstrap] Navs

기타/Bootstrap

[Bootstrap] Navs

glorypang 2025. 3. 25. 09:59

728x90

SMALL

1. 기본 수평 내비게이션 메뉴

`.nav` + `.nav-item` + `.nav-link` 클래스 사용
`.disabled`로 비활성화된 링크 표시 가능

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

2. 정렬 조정

클래스	정렬 방향
`.justify-content-center`	가운데 정렬
`.justify-content-end`	우측 정렬
(없음)	기본: 왼쪽 정렬

<!-- Centered nav -->
<ul class="nav justify-content-center">

<!-- Right-aligned nav -->
<ul class="nav justify-content-end">

3. 수직 내비게이션 메뉴

`.flex-column` 클래스 사용

<ul class="nav flex-column">...</ul>

4. 탭 형태 메뉴 (Tabs)

`.nav-tabs` 사용 → 상단 탭처럼 보임
`.active`는 현재 선택된 탭

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

5. 필 형태 메뉴 (Pills)

`.nav-pills` 사용 → 알약 형태 메뉴

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

6. 너비 균등 분배 (Justified)

`.nav-justified`사용 → 탭/필 너비를 균등하게 분배

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

7. 드롭다운 포함 메뉴

`.dropdown` 구조를 내부에 중첩하여 사용

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link 1</a></li>
      <li><a class="dropdown-item" href="#">Link 2</a></li>
      <li><a class="dropdown-item" href="#">Link 3</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

8. 동적으로 전환되는 탭 (Toggleable Tabs)

`data-bs-toggle="tab"` 속성 사용
콘텐츠 영역은 `.tab-content` + 각 영역에 `.tab-pane`
`.fade` 추가 시 전환 효과 적용

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>

<!-- Tab panes -->
<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>

9. 동적으로 전환되는 필 (Toggleable Pills)

구조는 탭과 동일, 클래스만 `.nav-pills`
`data-bs-toggle="pill"` 사용

<!-- Nav pills -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="pill" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu2">Menu 2</a>
  </li>
</ul>

<!-- Tab panes -->
<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>

728x90

LIST