Menu
드롭다운 Menu와 컨텍스트 Menu를 제공하는 컴포넌트입니다Property
Disabled
Menu의 비활성화 상태를 설정합니다.
Examples
Positioning
Menu의 표시 위치를 설정합니다.
Groups
Menu 아이템을 그룹화합니다.
With Checkbox Items
Checkbox Item을 사용합니다.
With Radio Items
Radio Item을 사용합니다.
With Submenu
Submenu를 구성할 수 있습니다.
Props Table
Menu.Root
Menu 복합 컴포넌트의 루트. 트리거로 여는 동작 또는 옵션 목록입니다. 열림 상태를 관리하며, disabled이면 트리거와 모든 항목을 비활성화합니다. 자체 HTML 요소를 렌더링하지 않습니다.
| Prop | Default | Type |
|---|---|---|
defaultOpen? | false | boolean |
onOpenChange? | - | function |
open? | - | boolean |
actionsRef? | - | React.RefObject<Menu.Root.Actions | null> |
children? | - | ReactNodefunction |
closeParentOnEsc? | false | boolean |
defaultTriggerId? | - | stringnull |
disabled? | false | boolean |
handle? | - | MenuHandle<unknown> |
highlightItemOnHover? | true | boolean |
loopFocus? | true | boolean |
modal? | true | boolean |
onItemHighlighted? | - | function |
onOpenChangeComplete? | - | function |
orientation? | vertical | horizontalvertical |
triggerId? | - | stringnull |
Menu.Trigger
클릭하면 Menu를 여는 버튼. <button> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNode |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
closeDelay? | 0 | number |
delay? | 100 | number |
disabled? | false | boolean |
handle? | - | MenuHandle<unknown> |
nativeButton? | true | boolean |
openOnHover? | - | boolean |
payload? | - | unknown |
render? | - | ReactElementfunction |
Menu.PositionerPrimitive
Menu.PortalPrimitive, Menu.PositionerPrimitive, Menu.PopupPrimitive를 하나의 파트로 합칩니다. 포털이나 포지셔너를 바꾸려면 portalElement 또는 positionerElement를 사용하세요. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNode |
className? | - | stringfunction |
portalElement? | - | ReactElement<MenuPortalPrimitive.Props> |
positionerElement? | - | ReactElement<MenuPositionerPrimitive.Props> |
style? | - | React.CSSPropertiesfunction |
finalFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
render? | - | ReactElementfunction |
Menu.PortalPrimitive
일반 DOM 계층 밖에 Menu를 렌더링하는 포털 컨테이너. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
container? | - | HTMLElementShadowRootReact.RefObject<HTMLElement | ShadowRoot | null>null |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |
Menu.PositionerPrimitive
Menu 팝업을 트리거 기준으로 배치하고 뷰포트 안에 유지합니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
align? | start | centerendstart |
alignOffset? | 0 | numberfunction |
anchor? | - | ElementVirtualElementReact.RefObject<Element | null>functionnull |
arrowPadding? | 5 | number |
collisionAvoidance? | - | CollisionAvoidance |
collisionBoundary? | clipping-ancestors | Boundary |
collisionPadding? | 5 | Padding |
disableAnchorTracking? | false | boolean |
positionMethod? | absolute | fixedabsolute |
side? | bottom | bottomleftrighttopinline-endinline-start |
sideOffset? | 4 | numberfunction |
sticky? | false | boolean |
render? | - | ReactElementfunction |
Menu.PopupPrimitive
Menu 항목을 담는 Menu 패널. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNode |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
finalFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
render? | - | ReactElementfunction |
Menu.CheckboxItemIndicatorPrimitive
선택하면 동작을 실행하는 Menu의 상호작용 항목. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
closeOnClick? | true | boolean |
disabled? | false | boolean |
label? | - | string |
nativeButton? | false | boolean |
onClick? | - | function |
render? | - | ReactElementfunction |
Menu.RadioItemIndicatorPrimitive
Menu 항목 그룹을 시각적으로 나누는 선. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
orientation? | horizontal | horizontalvertical |
render? | - | ReactElementfunction |
Menu.Group
관련된 Menu 항목을 Menu.GroupLabel 아래로 묶습니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
children? | - | ReactNode |
render? | - | ReactElementfunction |
Menu.GroupLabel
Menu 그룹의 레이블. 보조기술에 전달됩니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Menu.SubmenuRoot
Menu 안에 중첩된 하위 메뉴의 루트. Menu.SubmenuTriggerItem과 Menu.SubmenuPopup을 안에 배치하세요. 자체 HTML 요소를 렌더링하지 않습니다.
| Prop | Default | Type |
|---|---|---|
defaultOpen? | false | boolean |
onOpenChange? | - | function |
open? | - | boolean |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
actionsRef? | - | React.RefObject<Menu.Root.Actions | null> |
children? | - | ReactNode |
closeParentOnEsc? | false | boolean |
disabled? | false | boolean |
highlightItemOnHover? | true | boolean |
loopFocus? | true | boolean |
onItemHighlighted? | - | function |
onOpenChangeComplete? | - | function |
orientation? | vertical | horizontalvertical |
render? | - | ReactElementfunction |
Menu.SubmenuTriggerItem
하위 메뉴를 여는 Menu 항목. 끝에 쉐브론 아이콘이 있습니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
onClick? | - | function |
style? | - | React.CSSPropertiesfunction |
closeDelay? | 0 | number |
delay? | 100 | number |
disabled? | false | boolean |
label? | - | string |
nativeButton? | false | boolean |
openOnHover? | true | boolean |
render? | - | ReactElementfunction |
Menu.SubmenuPopup
Menu.PortalPrimitive, Menu.PositionerPrimitive, Menu.PopupPrimitive를 트리거 항목의 오른쪽으로 열리는 하나의 파트로 합칩니다. 포털이나 포지셔너를 바꾸려면 portalElement 또는 positionerElement를 사용하세요. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNode |
className? | - | stringfunction |
portalElement? | - | ReactElement<MenuPortalPrimitive.Props> |
positionerElement? | - | ReactElement<MenuPositionerPrimitive.Props> |
style? | - | React.CSSPropertiesfunction |
finalFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
render? | - | ReactElementfunction |
Menu.SubmenuPopupPrimitive
중첩된 Menu 항목을 담는 하위 메뉴 패널. 닫힐 때 Menu.SubmenuTriggerItem으로 포커스를 되돌립니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNode |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
finalFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
render? | - | ReactElementfunction |
Menu.CheckboxItem
Menu.CheckboxItemPrimitive와 Menu.CheckboxItemIndicatorPrimitive를 레이블 뒤에 체크 표시가 오는 하나의 파트로 합칩니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
checked? | - | boolean |
defaultChecked? | false | boolean |
onCheckedChange? | - | function |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
closeOnClick? | false | boolean |
disabled? | false | boolean |
label? | - | string |
nativeButton? | false | boolean |
onClick? | - | function |
render? | - | ReactElementfunction |
Menu.CheckboxItemPrimitive
설정을 켜거나 끄는 Menu 항목. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
checked? | - | boolean |
defaultChecked? | false | boolean |
onCheckedChange? | - | function |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
closeOnClick? | false | boolean |
disabled? | false | boolean |
label? | - | string |
nativeButton? | false | boolean |
onClick? | - | function |
render? | - | ReactElementfunction |
Menu.CheckboxItemIndicatorPrimitive
체크박스 항목이 체크된 동안 표시되는 체크 표시. <span> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
keepMounted? | true | boolean |
render? | - | ReactElementfunction |
Menu.RadioGroup
라디오 항목을 묶어 한 번에 하나만 선택할 수 있게 합니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
defaultValue? | - | any |
onValueChange? | - | function |
value? | - | any |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
children? | - | ReactNode |
disabled? | false | boolean |
render? | - | ReactElementfunction |
Menu.RadioItem
Menu.RadioItemPrimitive와 Menu.RadioItemIndicatorPrimitive를 레이블 뒤에 체크 표시가 오는 하나의 파트로 합칩니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
value | - | any |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
closeOnClick? | false | boolean |
disabled? | false | boolean |
label? | - | string |
nativeButton? | false | boolean |
onClick? | - | function |
render? | - | ReactElementfunction |
Menu.RadioItemPrimitive
Menu.RadioGroup 안에서 라디오 버튼처럼 동작하는 Menu 항목. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
value | - | any |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
closeOnClick? | false | boolean |
disabled? | false | boolean |
label? | - | string |
nativeButton? | false | boolean |
onClick? | - | function |
render? | - | ReactElementfunction |
Menu.RadioItemIndicatorPrimitive
라디오 항목이 선택된 동안 표시되는 체크 표시. <span> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |