KRDS React

사이드 메뉴 Side navigation ​

사이드 메뉴는 서브 화면 내에서의 이동을 위해 사용하는 메뉴이다. 일반적으로 본문 영역의 좌측에 사이드바 형태로 제공된다. 메인 메뉴보다 훨씬 좁고 깊은 페이지 구조 탐색에 사용되기 때문에 링크의 개수가 많고 복잡하게 표현되기 쉽다.

KRDS 가이드

기본 ​

tsx
import { SideNavigation } from '@krds.ui/react'

export default function SideNavigationDemo() {
  return (
    <SideNavigation>
      <SideNavigation.Title>민원 신청</SideNavigation.Title>
      <SideNavigation.Menu>
        <SideNavigation.Item>
          <SideNavigation.Link href="#apply">신청하기</SideNavigation.Link>
        </SideNavigation.Item>
      </SideNavigation.Menu>
    </SideNavigation>
  )
}

SideNavigation ​

Props

이름타입기본값설명
children (필수)ReactNode-자식 요소들
classNamestring-추가 CSS 클래스