이로울 | 포트폴리오

SideListMenu

Interactive UI Explorer

아래에서 각 컴포넌트의 다양한 Variants와 States를 문서화된 형태로 테스트해볼 수 있습니다.

사이드바나 목록 메뉴를 구현할 때 사용하는 컴포넌트입니다.
onSelect로 클릭 이벤트를 처리하거나, href로 외부 링크를 연결할 수 있습니다.

items 배열을 전달하고 activeId로 현재 활성화된 항목을 표시합니다. 비활성화 또는 외부 링크 옵션을 지원합니다.

Standard Items

const MENU_ITEMS = [
  { id: "dashboard", label: "대시보드" },
  { id: "users", label: "사용자 목록" },
  { id: "settings", label: "설정" },
];

Live Preview

Special Items

const SPECIAL_ITEMS = [
  { id: "disabled", label: "비활성화", disabled: true },
  { id: "link", label: "외부 링크", href: "#" },
];

Live Preview