CoreSideNavigation

개요

CoreSideNavigation은 타이틀과 메뉴 목록으로 구성된 세로형 사이드 네비게이션 컴포넌트입니다.

menuList — 텍스트·경로·활성화·비활성화 상태를 가진 메뉴 항목 배열
onClick — 메뉴 클릭 시 해당 Menu 객체 전달
isActive — 현재 활성화된 메뉴를 시각적으로 강조
isDisabled — 특정 메뉴를 클릭 불가 상태로 설정
width — CSS 값 또는 숫자(px)로 너비 제어

Usage

기본 사용법

<CoreSideNavigation
title="메뉴"
menuList={[
  { text: '메뉴 1', pathname: '/menu/1' },
  { text: '메뉴 2', pathname: '/menu/2' },
  { text: '메뉴 3', pathname: '/menu/3' },
]}
onClick={(menu) => console.log(menu)}
/>

활성 메뉴 표시

isActive: true인 항목은 primary 색상으로 강조됩니다.

<CoreSideNavigation
title="메뉴"
menuList={[
  { text: '메뉴 1', pathname: '/menu/1', isActive: true },
  { text: '메뉴 2', pathname: '/menu/2' },
  { text: '메뉴 3', pathname: '/menu/3' },
]}
onClick={(menu) => console.log(menu)}
/>

비활성화된 메뉴

isDisabled: true이면 해당 버튼에 disabled 속성이 적용됩니다.

<CoreSideNavigation
title="메뉴"
menuList={[
  { text: '메뉴 1', pathname: '/menu/1', isActive: true },
  { text: '메뉴 2', pathname: '/menu/2', isDisabled: true },
  { text: '메뉴 3', pathname: '/menu/3' },
]}
onClick={(menu) => console.log(menu)}
/>

너비 설정

width에 CSS 문자열 또는 숫자를 전달합니다. 숫자는 px로 처리됩니다.

<CoreSideNavigation
title="메뉴"
menuList={[
  { text: '메뉴 1', pathname: '/menu/1' },
  { text: '메뉴 2', pathname: '/menu/2' },
]}
onClick={(menu) => console.log(menu)}
width={280}
/>

Props

Prop

Type

Prop

Type

스타일

레이아웃

SideNavigation (루트):

padding-y: spacing-800 (32px)
background-color: white
width: width prop 값 (기본 100%)

Title:

typography: heading[3]
padding-x: spacing-400 (16px)

Menu 목록:

display: grid, gap: spacing-150 (6px)
margin-top: spacing-600 (24px)

MenuItem:

padding-x: spacing-150 (6px)

MenuButton:

typography: heading[2]
padding: spacing-100 spacing-250 (4px 10px)
border-radius: radius-100
width: 100%

상태별 토큰

상태	배경	텍스트
기본	—	상속
hover	`background[3]`	—
active (클릭)	`background[3]`	`primary[50]`
`isActive: true`	`background[3]`	`primary[60]`
disabled	—	`text[4]`
focus-visible	`outline: 2px solid focus`	—

CoreSideNavigation

On this page