in English

나브바

Bootstrap의 강력하고 반응이 빠른 탐색 헤더인 navbar에 대한 설명서 및 예제입니다. 접기 플러그인 지원을 포함하여 브랜딩, 탐색 등에 대한 지원이 포함됩니다.

이 페이지에서

작동 방식

탐색 모음을 시작하기 전에 알아야 할 사항은 다음과 같습니다.

Navbar는 반응형 축소 및 색 구성표 클래스 에 대한 래핑이 필요합니다 .navbar..navbar-expand{-sm|-md|-lg|-xl|-xxl}
Navbar와 그 내용은 기본적으로 유동적입니다. 컨테이너 를 변경하여 다양한 방식으로 가로 너비를 제한합니다.
탐색 모음 내에서 간격 및 정렬을 제어하기 위해 간격 및 플렉스 유틸리티 클래스를 사용 합니다.
Navbar는 기본적으로 반응형이지만 쉽게 수정하여 변경할 수 있습니다. 반응형 동작은 Collapse JavaScript 플러그인에 따라 다릅니다.
요소 를 사용하여 접근성을 보장 <nav>하거나 와 같은 보다 일반적인 요소를 사용하는 경우 모든 탐색 모음에 를 <div>추가하여 role="navigation"보조 기술 사용자를 위한 랜드마크 영역으로 명시적으로 식별합니다.
aria-current="page"현재 페이지 또는 세트의 현재 항목에 대해 를 사용하여 현재 항목을 나타냅니다 aria-current="true".

이 구성 요소의 애니메이션 효과는 prefers-reduced-motion미디어 쿼리에 따라 다릅니다. 접근성 설명서의 감소된 동작 섹션을 참조하십시오 .

지원되는 콘텐츠

Navbar에는 소수의 하위 구성 요소에 대한 지원이 내장되어 있습니다. 필요에 따라 다음 중에서 선택합니다.

.navbar-brand회사, 제품 또는 프로젝트 이름.
.navbar-nav전체 높이 및 경량 탐색(드롭다운 지원 포함).
.navbar-toggler축소 플러그인 및 기타 탐색 토글 동작과 함께 사용합니다.
모든 양식 컨트롤 및 작업을 위한 플렉스 및 간격 유틸리티.
.navbar-text세로로 가운데에 배치된 텍스트 문자열을 추가하기 위한 것입니다.
.collapse.navbar-collapse상위 중단점으로 탐색 모음 콘텐츠를 그룹화하고 숨기기 위한 것입니다.
.navbar-scroll확장된 탐색 모음 콘텐츠 를 설정 max-height하고 스크롤 하는 옵션을 추가합니다 .

lg다음은 (큰) 중단점 에서 자동으로 축소되는 반응형 조명 테마 탐색 모음에 포함된 모든 하위 구성 요소의 예입니다 .

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

이 예에서는 배경 ( bg-light) 및 공백 ( my-2, my-lg-0, me-sm-0, my-sm-0) 유틸리티 클래스를 사용합니다.

상표

대부분 의 .navbar-brand요소에 적용할 수 있지만 일부 요소에는 유틸리티 클래스 또는 사용자 정의 스타일이 필요할 수 있으므로 앵커가 가장 잘 작동합니다.

텍스트

클래스 를 사용하여 요소 내에 텍스트를 추가합니다 .navbar-brand.

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

영상

.navbar-brand안에 있는 텍스트를 로 바꿀 수 있습니다 <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    </a>
  </div>
</nav>

이미지 및 텍스트

또한 몇 가지 추가 유틸리티를 사용하여 이미지와 텍스트를 동시에 추가할 수도 있습니다. .d-inline-block및 의 추가에 유의 .align-text-top하십시오 <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

탐색

Navbar 탐색 링크 .nav는 자체 수정자 클래스가 있는 옵션을 기반으로 하며 적절한 반응 스타일을 위해 토글러 클래스 를 사용해야 합니다. 탐색 모음의 탐색은 탐색 모음 콘텐츠를 안전하게 정렬된 상태로 유지하기 위해 가능한 한 많은 수평 공간을 차지하도록 증가합니다 .

현재 페이지를 나타내기 위해 .active클래스를 추가합니다 ..nav-link

aria-current활성 에 속성 도 추가해야 합니다 .nav-link.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</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="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

그리고 우리는 탐색에 클래스를 사용하기 때문에 원하는 경우 목록 기반 접근 방식을 완전히 피할 수 있습니다.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</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">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled">Disabled</a>
      </div>
    </div>
  </div>
</nav>

탐색 모음에서 드롭다운을 사용할 수도 있습니다. 드롭다운 메뉴에는 위치 지정을 위한 래핑 요소가 필요하므로 아래와 같이 .nav-item및 에 대해 별도의 중첩 요소를 사용해야 합니다..nav-link

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</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="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</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">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

양식

탐색 모음 내에 다양한 양식 컨트롤 및 구성 요소 배치:

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

플렉스 레이아웃 을 사용하는 직접적인 자식 요소 .navbar는 기본적으로 justify-content: space-between. 이 동작을 조정하려면 필요에 따라 추가 플렉스 유틸리티 를 사용하십시오.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

입력 그룹도 작동합니다. 탐색 모음이 전체 양식이거나 대부분이 양식인 경우 <form>요소를 컨테이너로 사용하고 일부 HTML을 저장할 수 있습니다.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

다양한 버튼도 이러한 탐색 모음 형식의 일부로 지원됩니다. 이것은 또한 수직 정렬 유틸리티를 사용하여 다양한 크기의 요소를 정렬할 수 있음을 상기시켜줍니다.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

텍스트

Navbars는 의 도움으로 약간의 텍스트를 포함할 수 있습니다 .navbar-text. 이 클래스는 텍스트 문자열의 수직 정렬 및 수평 간격을 조정합니다.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

필요에 따라 다른 구성 요소 및 유틸리티와 혼합하여 사용하십시오.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav>

색 구성표

background-color테마 클래스와 유틸리티 의 조합 덕분에 탐색 모음에 테마를 지정하는 것이 그 어느 때보다 쉬워졌습니다 . 밝은 배경색 .navbar-light과 함께 사용하거나 .navbar-dark어두운 배경색에 사용할 수 있습니다. 그런 다음 .bg-*유틸리티로 사용자 정의하십시오.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

컨테이너

.container필수 는 아니지만 내부 컨테이너가 여전히 필요하지만 탐색 모음을 페이지 중앙에 배치할 수 있습니다 . 또는 내부에 컨테이너를 추가하여 고정 또는 정적 상단 탐색 모음.navbar 의 콘텐츠만 중앙에 배치할 수 있습니다 .

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
</div>

반응형 컨테이너를 사용하여 탐색 모음의 콘텐츠가 표시되는 너비를 변경합니다.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-md">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

놓기

위치 유틸리티 를 사용 하여 비정적 위치에 탐색 모음을 배치합니다. 상단에 고정, 하단에 고정 또는 상단에 고정 중에서 선택하십시오(페이지가 상단에 도달할 때까지 페이지를 스크롤한 다음 그대로 유지). 고정 탐색 모음 이 DOM의 일반적인 흐름에서 가져오고 다른 요소와 겹치는 것을 방지하기 위해 사용자 지정 CSS(예: on ) position: fixed가 필요할 수 있음을 의미합니다 .padding-top<body>

또한 모든 브라우저 .sticky-top에서 완전히 지원되는 것은position: sticky 아닙니다 .

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

스크롤링

축소된 탐색 모음의 토글 가능한 콘텐츠 내에서 세로 스크롤을 활성화 .navbar-nav-scroll하려면 a (또는 다른 탐색 모음 하위 구성 요소)에 추가 합니다. .navbar-nav기본적으로 스크롤은 뷰포트 높이의 75%에서 시작 되지만 로컬 CSS 사용자 정의 속성 이나 사용자 정의 스타일 75vh로 이를 재정의할 수 있습니다 . --bs-navbar-height탐색 모음이 확장되면 더 큰 뷰포트에서 콘텐츠가 기본 탐색 모음에서와 같이 표시됩니다.

이 동작에는 overflow-설정할 overflow-y: auto때(여기에서 콘텐츠를 스크롤하는 데 필요함) overflow-x가 와 동일하여 auto일부 가로 콘텐츠가 잘리는 잠재적인 단점이 있습니다.

다음 은 최적의 간격을 위한 추가 여백 유틸리티와 함께 .navbar-nav-scroll사용하는 탐색 모음의 예입니다.style="--bs-scroll-height: 100px;"

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

반응하는 행동

Navbar는 .navbar-toggler, .navbar-collapse및 .navbar-expand{-sm|-md|-lg|-xl|-xxl}클래스를 사용하여 해당 콘텐츠가 버튼 뒤에서 축소되는 시점을 결정할 수 있습니다. 다른 유틸리티와 함께 특정 요소를 표시하거나 숨길 시기를 쉽게 선택할 수 있습니다.

절대 축소되지 않는 탐색 모음의 경우 탐색 모음에 .navbar-expand클래스를 추가합니다. 항상 축소되는 탐색 모음의 경우 클래스를 추가하지 마십시오 .navbar-expand.

토글러

Navbar 토글러는 기본적으로 왼쪽 정렬되지만 , 와 같은 형제 요소 뒤에 오는 경우 .navbar-brand자동으로 맨 오른쪽에 정렬됩니다. 마크업을 반대로 하면 토글러의 배치가 반대로 됩니다. 다음은 다양한 토글 스타일의 예입니다.

.navbar-brand가장 작은 중단점에 표시 되지 않음:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Hidden brand</a>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

왼쪽에 브랜드 이름이 표시되고 오른쪽에 토글러가 표시됩니다.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

왼쪽에 토글러가 있고 오른쪽에 브랜드 이름이 있는 경우:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

외부 콘텐츠

때로는 접기 플러그인을 사용하여 구조적으로 .navbar. 플러그인이 작동 id하고 data-bs-target일치하므로 쉽게 완료됩니다!

접힌 콘텐츠

navbar 브랜드를 통해 전환할 수 있습니다.

<div class="collapse" id="navbarToggleExternalContent">
  <div class="bg-dark p-4">
    <h5 class="text-white h4">Collapsed content</h5>
    <span class="text-muted">Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

이 작업을 수행할 때 컨테이너가 열릴 때 프로그래밍 방식으로 컨테이너로 포커스를 이동하기 위해 추가 JavaScript를 포함하는 것이 좋습니다. 그렇지 않으면 키보드 사용자와 보조 기술 사용자가 새로 공개된 콘텐츠를 찾는 데 어려움을 겪을 수 있습니다. 특히 열린 컨테이너가 문서 구조에서 토글러 앞에 오는 경우 더욱 그렇습니다. 또한 토글러 에 콘텐츠 컨테이너 aria-controls를 가리키는 속성 이 있는지 확인하는 것이 좋습니다 . id이론적으로 이를 통해 보조 기술 사용자는 토글러에서 제어하는 컨테이너로 직접 이동할 수 있지만 이에 대한 지원은 현재 매우 고르지 않습니다.

오프캔버스

확장 및 축소 탐색 모음을 offcanvas 플러그인을 사용하여 offcanvas 서랍으로 변환합니다. 오프캔버스 기본 스타일을 모두 확장하고 .navbar-expand-*클래스를 사용하여 동적이고 유연한 탐색 사이드바를 만듭니다.

아래 예에서 모든 중단점에서 항상 축소되는 오프캔버스 탐색 모음을 만들려면 .navbar-expand-*클래스를 완전히 생략합니다.

<nav class="navbar navbar-light bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

와 같은 특정 중단점에서 일반 탐색 모음으로 확장되는 캔버스 탐색 모음을 만들려면 를 lg사용 .navbar-expand-lg하십시오.

<nav class="navbar navbar-light navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

사스

변수

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);

$navbar-light-brand-color:                $navbar-light-active-color;
$navbar-light-brand-hover-color:          $navbar-light-active-color;
$navbar-dark-brand-color:                 $navbar-dark-active-color;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color;

고리

반응형 탐색 모음 확장/축소 클래스 (예: .navbar-expand-lg)는 $breakpoints지도와 결합되고 의 루프를 통해 생성됩니다 scss/_navbar.scss.

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: $navbar-nav-link-padding-x;
            padding-left: $navbar-nav-link-padding-x;
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas-header {
          display: none;
        }

        .offcanvas {
          position: inherit;
          bottom: 0;
          z-index: 1000;
          flex-grow: 1;
          visibility: visible !important; // stylelint-disable-line declaration-no-important
          background-color: transparent;
          border-right: 0;
          border-left: 0;
          @include transition(none);
          transform: none;
        }
        .offcanvas-top,
        .offcanvas-bottom {
          height: auto;
          border-top: 0;
          border-bottom: 0;
        }

        .offcanvas-body {
          display: flex;
          flex-grow: 0;
          padding: 0;
          overflow-y: visible;
        }
      }
    }
  }
}