Bootstrap Nav

Bootstrap의 네비게이션 컴포넌트는 웹 사이트의 메뉴나 내비게이션 바를 쉽게 만들 수 있도록 돕습니다. 네비게이션 컴포넌트에는 주로 nav 클래스와 함께 다양한 유틸리티 클래스들을 사용합니다. 네비게이션 바는 주로 상단에 위치하며, 링크, 드롭다운 메뉴, 브랜드 로고 등을 포함할 수 있습니다.

기본 네비게이션 바

기본 네비게이션 바를 만들기 위해 navbar, navbar-expand-*, navbar-light 또는 navbar-dark, bg-* 클래스를 사용합니다. 여기서 navbar-expand-* 클래스는 화면 크기에 따라 내비게이션 바가 확장되는 방식(예: navbar-expand-lg는 큰 화면에서 확장)을 정의합니다. navbar-light과 navbar-dark는 텍스트 색상을 설정하며, bg-* 클래스는 배경색을 설정합니다.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">브랜드</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <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>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">비활성화됨</a>
      </li>
    </ul>
  </div>
</nav>

이 예제에서는 navbar 클래스와 함께 navbar-expand-lg, navbar-light, bg-light 클래스를 사용하여 기본 네비게이션 바를 정의했습니다. navbar-toggler 버튼은 화면 크기가 작아졌을 때 내비게이션 바를 접을 수 있도록 해줍니다.

드롭다운 메뉴 포함 네비게이션 바

네비게이션 바에 드롭다운 메뉴를 추가하려면 dropdown 클래스와 dropdown-toggle, dropdown-menu 클래스를 사용합니다.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">브랜드</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <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 dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          드롭다운
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <li><a class="dropdown-item" href="#">액션</a></li>
          <li><a class="dropdown-item" href="#">또 다른 액션</a></li>
          <li><a class="dropdown-item" href="#">다른 곳으로 이동</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">가격</a>
      </li>
    </ul>
  </div>
</nav>

이 예제에서는 nav-item dropdown 클래스를 사용하여 드롭다운 메뉴를 네비게이션 바에 포함시켰습니다. dropdown-toggle 클래스와 data-bs-toggle="dropdown" 속성을 사용하여 드롭다운 기능을 활성화합니다.

네비게이션 바 정렬

내비게이션 바의 항목을 오른쪽으로 정렬하려면 ml-auto 또는 ms-auto 클래스를 사용합니다. 이는 내비게이션 항목이 오른쪽으로 정렬되도록 만듭니다.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">브랜드</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav ms-auto">
      <a class="nav-link active" aria-current="page" href="#">홈</a>
      <a class="nav-link" href="#">기능</a>
      <a class="nav-link" href="#">가격</a>
    </div>
  </div>
</nav>

네비게이션 바에 폼 추가

내비게이션 바에 검색 폼이나 기타 폼 요소를 추가할 수 있습니다. form-inline 클래스를 사용하여 폼을 인라인으로 표시합니다.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">브랜드</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav me-auto">
      <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>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="검색" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">검색</button>
    </form>
  </div>
</nav>

이와 같이 Bootstrap의 네비게이션 컴포넌트를 사용하면 다양한 형태의 내비게이션 바를 쉽게 만들 수 있습니다. 내비게이션 바는 웹 사이트의 중요한 요소로, 사용자 경험을 향상시키는 데 중요한 역할을 합니다.