Navbar
Navbar (네이버)
브랜딩, 네비게이션, 그리고 collapse 플러그인 지원 등까지 포함하는 Bootstrap의 강력한 반응형 네비게이션 헤더인 navbar의 문서와 예시를 다룹니다.
출처: 문서
본문
동작 원리 (How it works)
navbar를 시작하기 전에 알아둘 것들:
- Navbar에는 반응형 축소와 색상 구성 클래스를 위해 래핑
.navbar와.navbar-expand{-sm|-md|-lg|-xl|-xxl}이 필요합니다. - Navbar와 그 내용물은 기본적으로 유동적(fluid)입니다. 컨테이너를 바꿔 가로 폭을 다르게 제한할 수 있습니다.
- Navbar 안의 간격과 정렬을 제어하려면 spacing과 flex 유틸리티 클래스를 사용하세요.
- Navbar는 기본적으로 반응형이지만 쉽게 수정해 바꿀 수 있습니다. 반응형 동작은 Collapse JavaScript 플러그인에 의존합니다.
<nav>요소를 사용하거나,<div>같은 더 일반적인 요소를 사용한다면 모든 navbar에role="navigation"을 추가해 보조 기술 사용자에게 명시적으로 landmark 영역임을 식별해 주어 접근성을 보장하세요.- 현재 페이지에는
aria-current="page"를, 집합 안의 현재 항목에는aria-current="true"를 사용해 현재 항목을 나타내세요. - v5.2.0의 새로운 기능: Navbar는
.navbar기본 클래스에 범위가 지정된 CSS 변수로 테마를 지정할 수 있습니다..navbar-light는 폐기되었고.navbar-dark는 추가 스타일을 더하는 대신 CSS 변수를 덮어쓰도록 재작성되었습니다.
이 컴포넌트의 애니메이션 효과는
prefers-reduced-motion미디어 쿼리에 의존합니다. 접근성 문서의 reduced motion 섹션을 참고하세요.
지원 콘텐츠 (Supported content)
Navbar에는 몇 가지 하위 컴포넌트에 대한 내장 지원이 있습니다. 필요에 따라 다음 중에서 선택하세요:
.navbar-brand— 회사, 제품, 또는 프로젝트 이름용..navbar-nav— 전체 높이의 가벼운 네비게이션용(드롭다운 지원 포함)..navbar-toggler— collapse 플러그인과 다른 네비게이션 토글 동작과 함께 사용.- 임의의 폼 컨트롤과 액션을 위한 Flex와 spacing 유틸리티.
.navbar-text— 세로로 가운데 정렬된 텍스트 문자열 추가용..collapse.navbar-collapse— 부모 브레이크포인트에 따라 navbar 내용을 그룹화하고 숨김.- 선택적
.navbar-nav-scroll추가 —max-height를 설정하고 확장된 navbar 내용을 스크롤.
다음은 lg(large) 브레이크포인트에서 자동으로 접히는 반응형 라이트 테마 navbar에 포함된 모든 하위 컴포넌트의 예시입니다.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<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" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<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-body-tertiary)과 간격(me-auto, mb-2, mb-lg-0, me-2) 유틸리티 클래스를 사용합니다.
Brand
.navbar-brand는 대부분의 요소에 적용할 수 있지만, 일부 요소는 유틸리티 클래스나 커스텀 스타일이 필요할 수 있으므로 앵커가 가장 잘 동작합니다.
텍스트 (Text)
.navbar-brand 클래스가 있는 요소 안에 텍스트를 추가하세요.
<!-- As a link -->
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- As a heading -->
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
</nav>
이미지 (Image)
.navbar-brand 안의 텍스트를 <img>로 바꿀 수 있습니다.
<nav class="navbar bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/docs/5.3/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
</a>
</div>
</nav>
이미지와 텍스트 (Image and text)
몇 가지 추가 유틸리티로 이미지와 텍스트를 동시에 추가할 수도 있습니다. <img>에 .d-inline-block과 .align-text-top이 추가된 점에 주의하세요.
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/5.3/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
Bootstrap
</a>
</div>
</nav>
Nav
Navbar 네비게이션 링크는 .nav 옵션을 자체 modifier 클래스로 확장하며, 올바른 반응형 스타일을 위해 toggler 클래스 사용이 필요합니다. Navbar의 네비게이션은 가능한 한 많은 가로 공간을 차지하도록 자라서 navbar 내용을 안전하게 정렬해 줍니다.
.nav-link에 .active 클래스를 추가해 현재 페이지를 나타내세요.
활성 .nav-link에 aria-current 속성도 추가해야 합니다.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<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" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
nav에 클래스를 사용하기 때문에 원한다면 리스트 기반 접근 방식을 완전히 피할 수도 있습니다.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<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" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
Navbar 안에서 드롭다운도 사용할 수 있습니다. 드롭다운 메뉴는 위치 지정을 위해 래핑 요소가 필요하므로, 아래처럼 .nav-item과 .nav-link에 별도의 중첩 요소를 사용해야 합니다.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu">
<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>
폼 (Forms)
다양한 폼 컨트롤과 컴포넌트를 navbar 안에 배치하세요:
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<form class="d-flex" role="search">
<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의 직계 자식 요소는 flex 레이아웃을 사용하며 기본적으로 justify-content: space-between이 됩니다. 필요에 따라 추가 flex 유틸리티로 이 동작을 조정하세요.
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex" role="search">
<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가 전체가 폼이거나 대부분 폼이라면 <form> 요소를 컨테이너로 사용해 HTML을 줄일 수 있습니다.
<nav class="navbar bg-body-tertiary">
<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>
이런 navbar 폼의 일부로 다양한 버튼도 지원됩니다. 세로 정렬 유틸리티로 다른 크기의 요소를 정렬할 수 있다는 좋은 예시이기도 합니다.
<nav class="navbar bg-body-tertiary">
<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>
텍스트 (Text)
Navbar는 .navbar-text의 도움으로 텍스트 조각을 포함할 수 있습니다. 이 클래스는 텍스트 문자열의 세로 정렬과 가로 간격을 조정합니다.
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
필요에 따라 다른 컴포넌트와 유틸리티와 섞어서 사용하세요.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<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>
색상 구성 (Color schemes)
v5.3.0의 새로운 다크 navbar —
.navbar-dark는 새로운data-bs-theme="dark"를 선호하여 폐기되었습니다..navbar에data-bs-theme="dark"를 추가해 컴포넌트별 color mode를 활성화하세요. color modes에 대해 자세히 알아보세요.v5.2.0의 새로운 기능 — Navbar 테마는 이제 CSS 변수로 구동되며
.navbar-light는 폐기되었습니다. CSS 변수는.navbar에 적용되어 "light" 모양이 기본이며.navbar-dark로 덮어쓸 수 있습니다.
Bootstrap의 Sass와 CSS 변수 조합 덕분에 navbar 테마는 그 어느 때보다 쉽습니다. 기본은 밝은 배경 색상용 "light navbar"이지만, 어두운 배경 색상을 위해 .navbar 부모에 data-bs-theme="dark"를 적용할 수도 있습니다. 그런 다음 .bg-*와 추가 유틸리티로 커스터마이즈하세요.
<nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">
<!-- Navbar content -->
</nav>
<nav class="navbar bg-primary" data-bs-theme="dark">
<!-- Navbar content -->
</nav>
<nav class="navbar" style="background-color: #e3f2fd;" data-bs-theme="light">
<!-- Navbar content -->
</nav>
컨테이너 (Containers)
필수는 아니지만 navbar를 .container로 감싸 페이지에서 가운데 정렬할 수 있습니다 — 다만 안쪽 컨테이너는 여전히 필요하다는 점에 주의하세요. 또는 고정(fixed) 또는 정적(static) 상단 navbar의 내용만 가운데 정렬하려면 .navbar 안에 컨테이너를 추가할 수 있습니다.
<div class="container">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
</div>
반응형 컨테이너 중 아무거나 사용해 navbar 내용이 표시되는 폭을 바꿀 수 있습니다.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
배치 (Placement)
position 유틸리티로 navbar를 비정적 위치에 배치하세요. 위쪽 고정, 아래쪽 고정, 위쪽 스티키(페이지가 위에 닿을 때까지 스크롤되다가 그 자리에 머무름), 또는 아래쪽 스티키(페이지가 아래에 닿을 때까지 스크롤되다가 그 자리에 머무름) 중에서 선택하세요.
고정 navbar는 position: fixed를 사용하므로, DOM의 일반적인 흐름에서 빠져나와 다른 요소와의 겹침을 막기 위해 커스텀 CSS(예: <body>의 padding-top)가 필요할 수 있습니다.
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Default</a>
</div>
</nav>
<nav class="navbar fixed-top bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed top</a>
</div>
</nav>
<nav class="navbar fixed-bottom bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed bottom</a>
</div>
</nav>
<nav class="navbar sticky-top bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky top</a>
</div>
</nav>
<nav class="navbar sticky-bottom bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky bottom</a>
</div>
</nav>
스크롤 (Scrolling)
.navbar-nav(또는 다른 navbar 하위 컴포넌트)에 .navbar-nav-scroll을 추가하면 접힌 navbar의 토글 가능한 내용 안에서 세로 스크롤을 활성화할 수 있습니다. 기본적으로 스크롤은 75vh(또는 뷰포트 높이의 75%)에서 시작하지만, 로컬 CSS 사용자 정의 속성 --bs-navbar-height나 커스텀 스타일로 덮어쓸 수 있습니다. navbar가 확장된 더 큰 뷰포트에서는 콘텐츠가 기본 navbar처럼 나타납니다.
이 동작에는 overflow의 잠재적 단점이 있습니다 — overflow-y: auto(여기서 콘텐츠 스크롤에 필요)를 설정하면 overflow-x는 auto와 동일해져 가로 콘텐츠 일부가 잘릴 수 있습니다.
다음은 .navbar-nav-scroll을 style="--bs-scroll-height: 100px;"와 함께 사용하고, 최적의 간격을 위해 추가 마진 유틸리티를 더한 navbar 예시입니다.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul class="dropdown-menu">
<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" aria-disabled="true">Link</a>
</li>
</ul>
<form class="d-flex" role="search">
<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>
반응형 동작 (Responsive behaviors)
Navbar는 .navbar-toggler, .navbar-collapse, .navbar-expand{-sm|-md|-lg|-xl|-xxl} 클래스를 사용해 내용이 버튼 뒤로 접히는 시점을 결정할 수 있습니다. 다른 유틸리티와 결합하면 특정 요소를 언제 표시하거나 숨길지 쉽게 선택할 수 있습니다.
절대 접히지 않는 navbar에는 .navbar-expand 클래스를 추가하세요. 항상 접히는 navbar에는 .navbar-expand 클래스를 추가하지 마세요.
Toggler
Navbar toggler는 기본적으로 왼쪽 정렬되지만, .navbar-brand 같은 형제 요소를 따라가면 자동으로 맨 오른쪽에 정렬됩니다. 마크업을 뒤집으면 toggler의 위치도 뒤집힙니다. 아래는 다양한 토글 스타일의 예시입니다.
가장 작은 브레이크포인트에서 .navbar-brand이 표시되지 않는 경우:
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<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" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<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>
왼쪽에 브랜드 이름, 오른쪽에 toggler가 있는 경우:
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<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" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<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>
왼쪽에 toggler, 오른쪽에 브랜드 이름이 있는 경우:
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<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" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<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>
외부 콘텐츠 (External content)
가끔 collapse 플러그인을 사용해 구조적으로 .navbar 밖에 있는 콘텐츠용 컨테이너 요소를 트리거하고 싶을 때가 있습니다. 플러그인이 id와 data-bs-target 매칭으로 동작하기 때문에 쉽게 할 수 있습니다!
<div class="collapse" id="navbarToggleExternalContent" data-bs-theme="dark">
<div class="bg-dark p-4">
<h5 class="text-body-emphasis h4">Collapsed content</h5>
<span class="text-body-secondary">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를 포함할 것을 권장합니다. 그렇지 않으면 키보드 사용자와 보조 기술 사용자가 새로 나타난 콘텐츠를 찾기 어려울 것입니다 — 특히 열린 컨테이너가 문서 구조에서 toggler보다 앞에 있을 때 더욱 그렇습니다. 또한 toggler에 콘텐츠 컨테이너의 id를 가리키는 aria-controls 속성이 있는지 확인하는 것도 권장합니다. 이론상으로는 보조 기술 사용자가 toggler에서 그 컨트롤하는 컨테이너로 직접 이동할 수 있게 해 주지만, 현재 지원은 꽤 부족합니다.
Offcanvas
확장되고 접히는 navbar를 offcanvas 컴포넌트로 offcanvas 서랍으로 변환하세요. offcanvas 기본 스타일을 확장하고 .navbar-expand-* 클래스를 사용해 동적이고 유연한 네비게이션 사이드바를 만듭니다.
아래 예시에서는 모든 브레이크포인트에서 항상 접히는 offcanvas navbar를 만들기 위해 .navbar-expand-* 클래스를 완전히 생략합니다.
<nav class="navbar bg-body-tertiary 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" aria-label="Toggle navigation">
<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" 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<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 mt-3" role="search">
<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로 확장되는 offcanvas navbar를 만들려면 .navbar-expand-lg를 사용하세요.
<nav class="navbar navbar-expand-lg bg-body-tertiary 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" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
...
</div>
</nav>
다크 navbar에서 offcanvas를 사용할 때는 텍스트가 읽을 수 없게 되는 것을 피하기 위해 offcanvas 콘텐츠에 다크 배경이 필요할 수 있다는 점을 알아두세요. 아래 예시에서는 다크 offcanvas에 올바른 스타일을 위해 .navbar에 .navbar-dark과 .bg-dark를, .offcanvas에 .text-bg-dark를, .dropdown-menu에 .dropdown-menu-dark를, .btn-close에 .btn-close-white를 추가했습니다.
<nav class="navbar navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas dark navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
<button type="button" class="btn-close btn-close-white" 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-dark">
<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 mt-3" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
<button class="btn btn-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</nav>
CSS
변수 (Variables)
v5.2.0에서 추가됨
Bootstrap의 진화하는 CSS 변수 접근 방식의 일부로, navbar는 이제 향상된 실시간 커스터마이즈를 위해 .navbar에 로컬 CSS 변수를 사용합니다. CSS 변수의 값은 Sass로 설정되므로 Sass 커스터마이즈도 여전히 지원됩니다.
--#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
--#{$prefix}navbar-padding-y: #{$navbar-padding-y};
--#{$prefix}navbar-color: #{$navbar-light-color};
--#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-light-active-color};
--#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
--#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
--#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
--#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
--#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
--#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
--#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
--#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
--#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
--#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
--#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
.navbar-nav에도 몇 가지 추가 CSS 변수가 있습니다:
--#{$prefix}nav-link-padding-x: 0;
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
--#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
--#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
CSS 변수를 통한 커스터마이즈는 중복 CSS selector 없이 특정 값을 덮어쓰는 .navbar-dark 클래스에서 볼 수 있습니다.
--#{$prefix}navbar-color: #{$navbar-dark-color};
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
--#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
--#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
Sass 변수
모든 navbar용 변수:
$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-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65);
$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8);
$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1);
$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3);
$navbar-light-icon-color: rgba($body-color, .75);
$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-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15);
$navbar-light-brand-color: $navbar-light-active-color;
$navbar-light-brand-hover-color: $navbar-light-active-color;
다크 navbar용 변수:
$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-icon-color: $navbar-dark-color;
$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-icon-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-dark-brand-color: $navbar-dark-active-color;
$navbar-dark-brand-hover-color: $navbar-dark-active-color;
Sass 루프 (Sass loops)
반응형 navbar 확장/축소 클래스(예: .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: var(--#{$prefix}navbar-nav-link-padding-x);
padding-left: var(--#{$prefix}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 {
// stylelint-disable declaration-no-important
position: static;
z-index: auto;
flex-grow: 1;
width: auto !important;
height: auto !important;
visibility: visible !important;
background-color: transparent !important;
border: 0 !important;
transform: none !important;
@include box-shadow(none);
@include transition(none);
// stylelint-enable declaration-no-important
.offcanvas-header {
display: none;
}
.offcanvas-body {
display: flex;
flex-grow: 0;
padding: 0;
overflow-y: visible;
}
}
}
}
}
}