Navbar
사이트 상단 내비게이션 바입니다. 브랜드·메뉴·검색·액션 버튼을 한 줄에 배치하며, 좁은 화면에서는 토글로 메뉴를 접습니다.
기본
NavbarItem으로 메뉴를 구성합니다. active prop으로 현재 페이지를 표시합니다.
브랜드
brandIcon에 Icon 컴포넌트를 함께 배치할 수 있습니다.
액션 영역
navbar_actions에 버튼·아바타 등을 배치합니다. 버튼 컴포넌트와 조합해 사용합니다.
검색
navbar_search에 input 컴포넌트를 넣어 검색 필드를 제공합니다.
크기
navbar_sm · navbar_lg로 높이를 조절합니다.
스타일 변형
navbar_borderless · navbar_dark · navbar_sticky로 외형을 바꿉니다.
배지
메뉴 항목에 badge 컴포넌트를 함께 사용할 수 있습니다.
반응형
768px 미만에서 navbar_toggle이 표시되고 메뉴가 접힙니다. aria-expanded · aria-controls · aria-label을 지정합니다.
API · Navbar Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
brand | string | — | 브랜드 텍스트. brand 슬롯으로 대체 |
size | 'sm' | 'md' | 'lg' | md | navbar_sm · navbar_lg |
borderless | boolean | false | 하단 테두리 제거 |
dark | boolean | false | 어두운 배경 (navbar_dark) |
sticky | boolean | false | 상단 고정 (navbar_sticky) |
responsive | boolean | false | 모바일 토글·data-navbar |
collapseId | string | — | navbar_collapse id (토글 aria-controls) |
brandAs | ElementType | a | 브랜드 루트 요소. Next Link 등을 지정 |
brandHref | string | # | 브랜드 링크 URL |
brandContent | ReactNode | — | 브랜드 영역 (brand prop 대체) |
brandIcon | ReactNode | — | 브랜드 아이콘 |
items | ReactNode | — | 메뉴 목록 (NavbarList) |
search | ReactNode | — | 검색 필드 (navbar_search) |
actions | ReactNode | — | 우측 액션 (navbar_actions) |
className | string | — | 루트 요소 추가 클래스 |
ripple | boolean | true | 클릭 파장(ripple). true 시 자식 클릭 표면에 data-ripple · false 시 data-no-ripple으로 하위 전체 비활성 |
API · NavbarItem Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
label | string | — | 링크 텍스트. children으로 대체 |
href | string | # | 링크 URL |
as | ElementType | a | 링크 루트 요소. Next Link 등을 지정 |
active | boolean | false | is-active · aria-current="page" |
badge | ReactNode | — | 링크 옆 배지 |
children | ReactNode | — | 링크 텍스트 (label 대체) |
className | string | — | 루트 요소 추가 클래스 |
ripple | boolean | true | 클릭 파장(ripple). true 시 data-ripple 활성 · false 비활성. 기본 활성 |
API · Navbar Children
| Prop / Children | 설명 |
|---|---|
brandContent | 브랜드 영역 (brand · brandIcon 대체) |
brandIcon | 브랜드 아이콘 |
items | 메뉴 목록 (NavbarList) |
children | items 대체 — NavbarItem 나열 |
search | 검색 필드 (navbar_search) |
actions | 우측 액션 (navbar_actions) |
API · NavbarItem Children
| Prop / Children | 설명 |
|---|---|
children | 링크 텍스트 (label 대체) |
badge | 링크 옆 배지 |
클래스 · 속성
React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
navbar · navbar_container · navbar_brand | 루트·컨테이너·브랜드 |
navbar_toggle · navbar_collapse · navbar_nav · navbar_list | 토글·접힘 영역·내비 |
navbar_item · navbar_link | 항목·링크 (is-active) |
navbar_search · navbar_actions | 검색·액션 영역 |
navbar_sm · navbar_lg · navbar_sticky · navbar_borderless · navbar_dark | 크기·변형 |
is-open | React 상태로 관리하는 반응형 메뉴 열림 상태 |
data-ripple | 클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용 |
data-ripple="false" | 해당 요소 ripple 비활성 |
data-no-ripple | 하위 전체 ripple 비활성 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--navbar-height · --navbar-height-sm · --navbar-height-lg | — | 높이 변형 |
--navbar-padding-x · --navbar-gap | — | 패딩·간격 |
--navbar-z-index | — | sticky 레이어 |