Nested Menu

자식 Menu.Root와 TriggerItem으로 서브메뉴를 여는 실제 중첩 메뉴를 구성합니다.

TriggerItem이 하이라이트·키보드(ArrowRight/Left) 탐색까지 처리하므로 wrapper 추가 코드 없이 중첩됩니다.

<script lang="ts">
  import * as Menu from '@odbd/svelte/menu'
</script>

<Menu.Root>
  <Menu.Trigger class="odbd-button" data-variant="outline" data-size="md">문서 작업 ▾</Menu.Trigger>
  <Menu.Positioner>
    <Menu.Content>
      <Menu.ItemGroup>
        <Menu.ItemGroupLabel>문서</Menu.ItemGroupLabel>
        <Menu.Item value="open">열기</Menu.Item>
        <Menu.Item value="duplicate">복제</Menu.Item>
        <Menu.Item value="archive">보관</Menu.Item>
      </Menu.ItemGroup>
      <Menu.Separator />

      <!-- 실제 중첩 메뉴: 자식 Menu.Root + TriggerItem이 서브메뉴를 연다 -->
      <Menu.Root>
        <Menu.TriggerItem class="examples-menu-item">
          <span>내보내기</span>
          <small>›</small>
        </Menu.TriggerItem>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="export-pdf" class="examples-menu-item">
              <span>PDF</span>
              <small>검토용</small>
            </Menu.Item>
            <Menu.Item value="export-csv" class="examples-menu-item">
              <span>CSV</span>
              <small>데이터</small>
            </Menu.Item>
            <Menu.Item value="export-json" class="examples-menu-item">
              <span>JSON</span>
              <small>연동</small>
            </Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Menu.Root>

      <Menu.Separator />
      <Menu.Item value="delete" class="examples-menu-item">
        <span>삭제</span>
        <small>주의</small>
      </Menu.Item>
    </Menu.Content>
  </Menu.Positioner>
</Menu.Root>