Context & Menu Item
컨텍스트 메뉴와 드롭다운 목록의 아이템이에요. 너비는 부모에 맞춰 fill 로 채워요.
Anatomy
- 01Container (Menu List)리스트 컨테이너. radius 8px, padding 4px, gap 4px, shadow-md
- 02Menu Item (Check Icon + Label)높이 28px. 18×18 체크 아이콘 + 레이블(gap 8px), hover 시 배경 채움
- 03Divider그룹을 나누는 1px 선. 필요할 때만
Properties
State
Default · Hover(배경 채움) · Selected(굵은 글씨) 세 상태예요.
Base — Single List
기본 단일 목록이에요. 너비는 고정하지 않고 부모 기준 fill 로 채워요.
Case
아이템 구성
구성은 세 가지예요. Case 1·2 는 한 메뉴에 섞일 수 있고(체브론은 하위 메뉴가 있을 때만), Case 3 선택 목록은 거의 단독으로 써요.
01
Case 1 · 텍스트 전용
레이블만. 선택 표시가 필요 없는 명령 목록이에요.
02
Case 2 · 텍스트 + 우측 체브론
하위 메뉴로 진입하는 항목. 우측에 18×18 체브론을 둬요.
03
Case 1+2 · 혼용
하위 메뉴가 있는 항목과 없는 항목이 섞여요. 체브론 유무가 곧 더 들어갈 수 있는지의 신호예요.
04
Case 3 · 체크 + 텍스트
현재 값을 표시하는 선택 목록. 거의 단독으로 쓰고, 체크 자리는 항상 남겨 정렬을 지켜요.
Multi-column + Scroll
항목이 많으면 멀티 컬럼(선택 범위를 한눈에)이나 스크롤(길이 제한) 중 하나예요.
멀티 컬럼
스크롤 (12개 중 7개 노출)
Guidelines
✓ DO
- 너비는 부모 기준 fill
- 항목이 많으면 max-height + 스크롤
- 그룹 구분이 필요하면 Divider
- 선택된 항목은 Selected 로 표시
✗ DON'T
- 한 메뉴에 10개 이상(그룹 분리 검토)
- 아이템 안에 이미지·멀티라인 같은 복잡한 UI
- 고정 너비(px) 지정
Specification
Container
| 속성 | 값 | 설명 |
|---|---|---|
| background | --color-background-base (#ffffff) | |
| border-radius | 8px | |
| box-shadow | 0 2px 6px rgba(0,0,0,0.06) | shadow/shadow-md |
| padding | 4px | 아이템 간 gap: 4px |
| width | fill (부모 기준) | 고정 너비 사용 금지 |
| max-height (scroll) | 220px | 초과 시 overflow-y: auto |
Item
| 속성 | Default | Hover | Selected |
|---|---|---|---|
| background | #ffffff | --color-interaction-hover (#f2f4f6) | --color-interaction-pressed (#e8ebed) |
| color | --color-label-neutral (#454c53) | --color-label-neutral (#454c53) | --color-label-normal (#26282b) |
| font-weight | 400 | 400 | 500 |
| 속성 | 값 |
|---|---|
| height | 28px |
| padding | 6px |
| border-radius | 6px |
| font-size | 13px (font-size/xs) |
| check icon size | 18×18px |
| submenu chevron size | 18×18px (우측, Case 2) |
| icon-label gap | 8px |
설치
npm i @polarisoffice/pds-reactBase · Single List
너비는 부모 기준 fill 로 채워요.
import { Menu, MenuItem, MenuDivider } from '@polarisoffice/pds-react';
<Menu>
<MenuItem>Text</MenuItem>
<MenuItem selected>Text</MenuItem>
<MenuItem>Text</MenuItem>
</Menu>Text Only
고르는 목록이 아니라 실행 메뉴일 때. 체크 슬롯을 빼면 레이블만 남아요.
import { Menu, MenuItem, MenuDivider } from '@polarisoffice/pds-react';
<Menu>
<MenuItem hideCheck>Text</MenuItem>
<MenuItem hideCheck>Text</MenuItem>
<MenuItem hideCheck>Text</MenuItem>
</Menu>Submenu
하위 메뉴가 있는 항목에 화살표를 붙여요. 실제로 더 들어갈 때만 써요.
import { Menu, MenuItem, MenuDivider } from '@polarisoffice/pds-react';
<Menu>
<MenuItem hideCheck hasSubmenu>Text</MenuItem>
<MenuItem hideCheck hasSubmenu>Text</MenuItem>
</Menu>Divider
항목 그룹 구분이 필요할 때만 넣어요.
import { Menu, MenuItem, MenuDivider } from '@polarisoffice/pds-react';
<Menu>
<MenuItem>Text</MenuItem>
<MenuDivider />
<MenuItem>Text</MenuItem>
</Menu>Scroll
항목이 많으면 max-height 220px + 스크롤. 10개를 넘으면 그룹 분리를 먼저 검토해요.
import { Menu, MenuItem, MenuDivider } from '@polarisoffice/pds-react';
<Menu maxHeight={220}>
{items.map((item) => (
<MenuItem key={item.id}>{item.label}</MenuItem>
))}
</Menu>