Menubar

데스크톱 애플리케이션에서 흔히 볼 수 있는 시각적으로 지속되는 메뉴로, 일관된 명령 세트에 빠르게 접근할 수 있습니다.

Docs API Reference

<script lang="ts">
  import * as Menubar from "$lib/components/ui/menubar/index.js";
 
  let bookmarks = $state(false);
  let fullUrls = $state(true);
  let profileRadioValue = $state("benoit");
</script>
 
<Menubar.Root>
  <Menubar.Menu>
    <Menubar.Trigger>파일</Menubar.Trigger>
    <Menubar.Content>
      <Menubar.Item>
        새 탭 <Menubar.Shortcut>⌘T</Menubar.Shortcut>
      </Menubar.Item>
      <Menubar.Item>
        새 창 <Menubar.Shortcut>⌘N</Menubar.Shortcut>
      </Menubar.Item>
      <Menubar.Item>새 시크릿 창</Menubar.Item>
      <Menubar.Separator />
      <Menubar.Sub>
        <Menubar.SubTrigger>공유</Menubar.SubTrigger>
        <Menubar.SubContent>
          <Menubar.Item>이메일 링크</Menubar.Item>
          <Menubar.Item>메시지</Menubar.Item>
          <Menubar.Item>메모</Menubar.Item>
        </Menubar.SubContent>
      </Menubar.Sub>
      <Menubar.Separator />
      <Menubar.Item>
        인쇄... <Menubar.Shortcut>⌘P</Menubar.Shortcut>
      </Menubar.Item>
    </Menubar.Content>
  </Menubar.Menu>
  <Menubar.Menu>
    <Menubar.Trigger>편집</Menubar.Trigger>
    <Menubar.Content>
      <Menubar.Item>
        실행 취소 <Menubar.Shortcut>⌘Z</Menubar.Shortcut>
      </Menubar.Item>
      <Menubar.Item>
        다시 실행 <Menubar.Shortcut>⇧⌘Z</Menubar.Shortcut>
      </Menubar.Item>
      <Menubar.Separator />
      <Menubar.Sub>
        <Menubar.SubTrigger>찾기</Menubar.SubTrigger>
        <Menubar.SubContent>
          <Menubar.Item>웹 검색</Menubar.Item>
          <Menubar.Separator />
          <Menubar.Item>찾기...</Menubar.Item>
          <Menubar.Item>다음 찾기</Menubar.Item>
          <Menubar.Item>이전 찾기</Menubar.Item>
        </Menubar.SubContent>
      </Menubar.Sub>
      <Menubar.Separator />
      <Menubar.Item>잘라내기</Menubar.Item>
      <Menubar.Item>복사</Menubar.Item>
      <Menubar.Item>붙여넣기</Menubar.Item>
    </Menubar.Content>
  </Menubar.Menu>
  <Menubar.Menu>
    <Menubar.Trigger>보기</Menubar.Trigger>
    <Menubar.Content>
      <Menubar.CheckboxItem bind:checked={bookmarks}
        >항상 북마크 표시줄 표시</Menubar.CheckboxItem
      >
      <Menubar.CheckboxItem bind:checked={fullUrls}
        >항상 전체 URL 표시</Menubar.CheckboxItem
      >
      <Menubar.Separator />
      <Menubar.Item inset>
        새로고침 <Menubar.Shortcut>⌘R</Menubar.Shortcut>
      </Menubar.Item>
      <Menubar.Item inset>
        강제 새로고침 <Menubar.Shortcut>⇧⌘R</Menubar.Shortcut>
      </Menubar.Item>
      <Menubar.Separator />
      <Menubar.Item inset>전체화면 전환</Menubar.Item>
      <Menubar.Separator />
      <Menubar.Item inset>사이드바 숨기기</Menubar.Item>
    </Menubar.Content>
  </Menubar.Menu>
  <Menubar.Menu>
    <Menubar.Trigger>프로필</Menubar.Trigger>
    <Menubar.Content>
      <Menubar.RadioGroup bind:value={profileRadioValue}>
        <Menubar.RadioItem value="andy">Andy</Menubar.RadioItem>
        <Menubar.RadioItem value="benoit">Benoit</Menubar.RadioItem>
        <Menubar.RadioItem value="Luis">Luis</Menubar.RadioItem>
      </Menubar.RadioGroup>
      <Menubar.Separator />
      <Menubar.Item inset>편집...</Menubar.Item>
      <Menubar.Separator />
      <Menubar.Item inset>프로필 추가...</Menubar.Item>
    </Menubar.Content>
  </Menubar.Menu>
</Menubar.Root>

설치

pnpm dlx shadcn-svelte@latest add menubar

npx shadcn-svelte@latest add menubar

npx shadcn-svelte@latest add menubar

bun x shadcn-svelte@latest add menubar

Install bits-ui:

pnpm i bits-ui -D

npm i bits-ui -D

yarn install bits-ui -D

bun install bits-ui -D

Copy and paste the following code into your project.

import Root from "./menubar.svelte";
import Menu from "./menubar-menu.svelte";
import Sub from "./menubar-sub.svelte";
import RadioGroup from "./menubar-radio-group.svelte";
import CheckboxItem from "./menubar-checkbox-item.svelte";
import Content from "./menubar-content.svelte";
import Item from "./menubar-item.svelte";
import Group from "./menubar-group.svelte";
import RadioItem from "./menubar-radio-item.svelte";
import Separator from "./menubar-separator.svelte";
import Shortcut from "./menubar-shortcut.svelte";
import SubContent from "./menubar-sub-content.svelte";
import SubTrigger from "./menubar-sub-trigger.svelte";
import Trigger from "./menubar-trigger.svelte";
import Label from "./menubar-label.svelte";
import GroupHeading from "./menubar-group-heading.svelte";
import Portal from "./menubar-portal.svelte";

export {
  Root,
  CheckboxItem,
  Content,
  Item,
  RadioItem,
  Separator,
  Shortcut,
  SubContent,
  SubTrigger,
  Trigger,
  Menu,
  Group,
  Sub,
  RadioGroup,
  Label,
  GroupHeading,
  Portal,
  //
  Root as Menubar,
  CheckboxItem as MenubarCheckboxItem,
  Content as MenubarContent,
  Item as MenubarItem,
  RadioItem as MenubarRadioItem,
  Separator as MenubarSeparator,
  Shortcut as MenubarShortcut,
  SubContent as MenubarSubContent,
  SubTrigger as MenubarSubTrigger,
  Trigger as MenubarTrigger,
  Menu as MenubarMenu,
  Group as MenubarGroup,
  Sub as MenubarSub,
  RadioGroup as MenubarRadioGroup,
  Label as MenubarLabel,
  GroupHeading as MenubarGroupHeading,
  Portal as MenubarPortal,
};

사용법

<script lang="ts">
  import * as Menubar from "$lib/components/ui/menubar/index.js";
</script>

<Menubar.Root>
  <Menubar.Menu>
    <Menubar.Trigger>파일</Menubar.Trigger>
    <Menubar.Content>
      <Menubar.Item>
        새 탭
        <Menubar.Shortcut>⌘T</Menubar.Shortcut>
      </Menubar.Item>
      <Menubar.Item>새 창</Menubar.Item>
      <Menubar.Separator />
      <Menubar.Item>공유</Menubar.Item>
      <Menubar.Separator />
      <Menubar.Item>인쇄</Menubar.Item>
    </Menubar.Content>
  </Menubar.Menu>
</Menubar.Root>

Label Native Select