BottomNav

모바일 앱 하단 탭 내비게이션이에요. 아이콘·레이블·뱃지를 항목마다 지정할 수 있어요.

사용법

BottomNav는 모바일 앱 하단 탭이에요. 아이콘·레이블·뱃지를 항목마다 지정할 수 있어요.

스타일 커스터마이징

BottomNav 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.

className / style

<BottomNav
  className="shadow-md"
  style={{
    --gtd-ui-primary: "#059669",
  }}
/>

classNames 슬롯

복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.

<BottomNav
  classNames={{
    list: "my-bottom-nav-list",
    item: "my-bottom-nav-item",
    button: "my-bottom-nav-button",
    iconWrap: "my-bottom-nav-iconWrap",
    badge: "my-bottom-nav-badge",
    label: "my-bottom-nav-label"
  }}
/>

CSS 변수

변수	설명
--gtd-ui-primary	선택 탭 색
--gtd-accent	뱃지 배경

인터페이스

BottomNavProps

속성	타입	기본값	설명
items*	BottomNavItem[]	—	탭 항목 (id, label, icon, badge)
value*	string	—	현재 선택된 탭 id
onChange*	(id: string) => void	—	탭 변경 콜백
className	string	—	루트 요소 클래스. Tailwind·커스텀 CSS 적용
style	CSSProperties	—	인라인 스타일·CSS 변수(--gtd-*) 오버라이드

가져오기

import { BottomNav } from "@/components/ui/BottomNav";