Menu - Vapor UI

'use client';

import { Button, Menu } from '@vapor-ui/core';

export default function DefaultMenu() {
    return (
        <Menu.Root>
            <Menu.Trigger render={<Button>메뉴 열기</Button>} />
            <Menu.Popup>
                <Menu.Item>새 파일</Menu.Item>
                <Menu.Item>새 폴더</Menu.Item>
                <Menu.Separator />
                <Menu.Item>복사</Menu.Item>
                <Menu.Item>붙여넣기</Menu.Item>
                <Menu.Separator />
                <Menu.Item>삭제</Menu.Item>
            </Menu.Popup>
        </Menu.Root>
    );
}

Property

Disabled

Menu의 비활성화 상태를 설정합니다.

'use client';

import { Button, Menu } from '@vapor-ui/core';

export default function MenuDisabled() {
    return (
        <div className="flex flex-wrap gap-4">
            <Menu.Root>
                <Menu.Trigger render={<Button>일반 메뉴</Button>} />
                <Menu.Popup>
                    <Menu.Item>활성 아이템 1</Menu.Item>
                    <Menu.Item disabled>비활성 아이템</Menu.Item>
                    <Menu.Item>활성 아이템 2</Menu.Item>
                    <Menu.Separator />
                    <Menu.Item disabled>비활성 아이템 2</Menu.Item>
                    <Menu.Item>활성 아이템 3</Menu.Item>
                </Menu.Popup>
            </Menu.Root>

            <Menu.Root disabled>
                <Menu.Trigger render={<Button>비활성 메뉴</Button>} />
                <Menu.Popup>
                    <Menu.Item>아이템 1</Menu.Item>
                    <Menu.Item>아이템 2</Menu.Item>
                    <Menu.Item>아이템 3</Menu.Item>
                </Menu.Popup>
            </Menu.Root>
        </div>
    );
}

Examples

Positioning

Menu의 표시 위치를 설정합니다.

'use client';

import { Button, Menu } from '@vapor-ui/core';

export default function MenuPositioning() {
    return (
        <div className="flex flex-wrap gap-4">
            <Menu.Root>
                <Menu.Trigger render={<Button>상단 메뉴</Button>} />
                <Menu.PortalPrimitive>
                    <Menu.PositionerPrimitive side="top">
                        <Menu.PopupPrimitive>
                            <Menu.Item>상단 아이템 1</Menu.Item>
                            <Menu.Item>상단 아이템 2</Menu.Item>
                            <Menu.Item>상단 아이템 3</Menu.Item>
                        </Menu.PopupPrimitive>
                    </Menu.PositionerPrimitive>
                </Menu.PortalPrimitive>
            </Menu.Root>

            <Menu.Root>
                <Menu.Trigger render={<Button>우측 메뉴</Button>} />
                <Menu.PortalPrimitive>
                    <Menu.PositionerPrimitive side="right">
                        <Menu.PopupPrimitive>
                            <Menu.Item>우측 아이템 1</Menu.Item>
                            <Menu.Item>우측 아이템 2</Menu.Item>
                            <Menu.Item>우측 아이템 3</Menu.Item>
                        </Menu.PopupPrimitive>
                    </Menu.PositionerPrimitive>
                </Menu.PortalPrimitive>
            </Menu.Root>

            <Menu.Root>
                <Menu.Trigger render={<Button>하단 메뉴</Button>} />
                <Menu.PortalPrimitive>
                    <Menu.PositionerPrimitive side="bottom">
                        <Menu.PopupPrimitive>
                            <Menu.Item>하단 아이템 1</Menu.Item>
                            <Menu.Item>하단 아이템 2</Menu.Item>
                            <Menu.Item>하단 아이템 3</Menu.Item>
                        </Menu.PopupPrimitive>
                    </Menu.PositionerPrimitive>
                </Menu.PortalPrimitive>
            </Menu.Root>

            <Menu.Root>
                <Menu.Trigger render={<Button>좌측 메뉴</Button>} />
                <Menu.PortalPrimitive>
                    <Menu.PositionerPrimitive side="left">
                        <Menu.PopupPrimitive>
                            <Menu.Item>좌측 아이템 1</Menu.Item>
                            <Menu.Item>좌측 아이템 2</Menu.Item>
                            <Menu.Item>좌측 아이템 3</Menu.Item>
                        </Menu.PopupPrimitive>
                    </Menu.PositionerPrimitive>
                </Menu.PortalPrimitive>
            </Menu.Root>
        </div>
    );
}

Groups

Menu 아이템을 그룹화합니다.

'use client';

import { Button, Menu } from '@vapor-ui/core';

export default function MenuGroups() {
    return (
        <Menu.Root>
            <Menu.Trigger render={<Button>그룹 메뉴</Button>} />
            <Menu.Popup>
                <Menu.Group>
                    <Menu.GroupLabel>파일</Menu.GroupLabel>
                    <Menu.Item>새 파일</Menu.Item>
                    <Menu.Item>파일 열기</Menu.Item>
                    <Menu.Item>파일 저장</Menu.Item>
                </Menu.Group>
                <Menu.Separator />
                <Menu.Group>
                    <Menu.GroupLabel>편집</Menu.GroupLabel>
                    <Menu.Item>복사</Menu.Item>
                    <Menu.Item>붙여넣기</Menu.Item>
                    <Menu.Item>잘라내기</Menu.Item>
                </Menu.Group>
                <Menu.Separator />
                <Menu.Group>
                    <Menu.GroupLabel>도구</Menu.GroupLabel>
                    <Menu.Item>설정</Menu.Item>
                    <Menu.Item>도움말</Menu.Item>
                </Menu.Group>
            </Menu.Popup>
        </Menu.Root>
    );
}

With Checkbox Items

Checkbox Item을 사용합니다.

'use client';

import { useState } from 'react';

import { Button, Menu } from '@vapor-ui/core';

export default function MenuCheckbox() {
    const [showToolbar, setShowToolbar] = useState(true);
    const [showSidebar, setShowSidebar] = useState(false);
    const [showStatusbar, setShowStatusbar] = useState(true);

    return (
        <Menu.Root>
            <Menu.Trigger render={<Button>보기 설정</Button>} />
            <Menu.Popup>
                <Menu.Group>
                    <Menu.GroupLabel>보기 옵션</Menu.GroupLabel>
                    <Menu.CheckboxItem checked={showToolbar} onCheckedChange={setShowToolbar}>
                        툴바 표시
                    </Menu.CheckboxItem>
                    <Menu.CheckboxItem checked={showSidebar} onCheckedChange={setShowSidebar}>
                        사이드바 표시
                    </Menu.CheckboxItem>
                    <Menu.CheckboxItem checked={showStatusbar} onCheckedChange={setShowStatusbar}>
                        상태바 표시
                    </Menu.CheckboxItem>
                </Menu.Group>
            </Menu.Popup>
        </Menu.Root>
    );
}

With Radio Items

Radio Item을 사용합니다.

'use client';

import { useState } from 'react';

import { Button, Menu } from '@vapor-ui/core';

export default function MenuRadio() {
    const [fontSize, setFontSize] = useState('medium');

    return (
        <Menu.Root>
            <Menu.Trigger render={<Button>글꼴 크기</Button>} />
            <Menu.Popup>
                <Menu.Group>
                    <Menu.GroupLabel>글꼴 크기 선택</Menu.GroupLabel>
                    <Menu.RadioGroup value={fontSize} onValueChange={setFontSize}>
                        <Menu.RadioItem value="small">작게 (12px)</Menu.RadioItem>
                        <Menu.RadioItem value="medium">보통 (14px)</Menu.RadioItem>
                        <Menu.RadioItem value="large">크게 (16px)</Menu.RadioItem>
                        <Menu.RadioItem value="xl">매우 크게 (18px)</Menu.RadioItem>
                    </Menu.RadioGroup>
                </Menu.Group>
            </Menu.Popup>
        </Menu.Root>
    );
}

With Submenu

Submenu를 구성할 수 있습니다.

'use client';

import { Button, Menu } from '@vapor-ui/core';

export default function MenuSubmenu() {
    return (
        <Menu.Root>
            <Menu.Trigger render={<Button>서브메뉴</Button>} />
            <Menu.Popup>
                <Menu.Item>새 파일</Menu.Item>
                <Menu.Item>파일 열기</Menu.Item>
                <Menu.Separator />

                <Menu.SubmenuRoot>
                    <Menu.SubmenuTriggerItem>최근 파일</Menu.SubmenuTriggerItem>
                    <Menu.SubmenuPopup>
                        <Menu.Item>document.txt</Menu.Item>
                        <Menu.Item>presentation.pptx</Menu.Item>
                        <Menu.Item>spreadsheet.xlsx</Menu.Item>
                        <Menu.Separator />
                        <Menu.Item>더 많은 파일...</Menu.Item>
                    </Menu.SubmenuPopup>
                </Menu.SubmenuRoot>

                <Menu.SubmenuRoot>
                    <Menu.SubmenuTriggerItem>내보내기</Menu.SubmenuTriggerItem>
                    <Menu.SubmenuPopup>
                        <Menu.Item>PDF로 내보내기</Menu.Item>
                        <Menu.Item>이미지로 내보내기</Menu.Item>
                        <Menu.Item>HTML로 내보내기</Menu.Item>
                    </Menu.SubmenuPopup>
                </Menu.SubmenuRoot>

                <Menu.Separator />
                <Menu.Item>종료</Menu.Item>
            </Menu.Popup>
        </Menu.Root>
    );
}