Zaidan

Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Installation

CLI

npx shadcn@latest add @zaidan/menubar

pnpx shadcn add @zaidan/menubar

yarn dlx shadcn@latest add @zaidan/menubar

bunx shadcn@latest add @zaidan/menubar

Manual

Install the following dependencies:

npm i @kobalte/core

pnpm add @kobalte/core

yarn add @kobalte/core

bun add @kobalte/core

Copy and paste the following code into your project.

1
import * as MenubarPrimitive from "@kobalte/core/menubar";
2
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
3
import { Check, ChevronRight } from "lucide-solid";
4
import type { Component, ComponentProps, ValidComponent } from "solid-js";
5
import { mergeProps, splitProps } from "solid-js";
6

7
import { cn } from "~/lib/utils";
8

9
type MenubarProps<T extends ValidComponent = "div"> = PolymorphicProps<
10
  T,
11
  MenubarPrimitive.MenubarRootProps<T>
12
> &
13
  Pick<ComponentProps<T>, "class" | "children">;
14

15
const Menubar = <T extends ValidComponent = "div">(props: MenubarProps<T>) => {
16
  const [local, others] = splitProps(props as MenubarProps, ["class"]);
17
  return (
18
    <MenubarPrimitive.Root
19
      data-slot="menubar"
20
      class={cn("z-menubar flex items-center", local.class)}
21
      {...others}
22
    />
23
  );
24
};
25

26
const MenubarMenu = (props: MenubarPrimitive.MenubarMenuProps) => {
27
  const mergedProps = mergeProps({ gutter: 8 }, props);
28
  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...mergedProps} />;
29
};
30

31
type MenubarTriggerProps<T extends ValidComponent = "button"> = PolymorphicProps<
32
  T,
33
  MenubarPrimitive.MenubarTriggerProps<T>
34
> &
35
  Pick<ComponentProps<T>, "class" | "children">;
36

37
const MenubarTrigger = <T extends ValidComponent = "button">(props: MenubarTriggerProps<T>) => {
38
  const [local, others] = splitProps(props as MenubarTriggerProps, ["class", "children"]);
39
  return (
40
    <MenubarPrimitive.Trigger
41
      data-slot="menubar-trigger"
42
      class={cn("z-menubar-trigger flex select-none items-center outline-hidden", local.class)}
43
      {...others}
44
    >
45
      {local.children}
46
    </MenubarPrimitive.Trigger>
47
  );
48
};
49

50
const MenubarPortal: Component<MenubarPrimitive.MenubarPortalProps> = (props) => {
51
  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
52
};
53

54
type MenubarContentProps<T extends ValidComponent = "div"> = PolymorphicProps<
55
  T,
56
  MenubarPrimitive.MenubarContentProps<T>
57
> &
58
  Pick<ComponentProps<T>, "class">;
59

60
const MenubarContent = <T extends ValidComponent = "div">(props: MenubarContentProps<T>) => {
61
  const [local, others] = splitProps(props as MenubarContentProps, ["class"]);
62
  return (
63
    <MenubarPortal>
64
      <MenubarPrimitive.Content
65
        data-slot="menubar-content"
66
        class={cn("z-50 z-menu-target z-menubar-content min-w-48 overflow-hidden", local.class)}
67
        {...others}
68
      />
69
    </MenubarPortal>
70
  );
71
};
72

73
type MenubarGroupProps<T extends ValidComponent = "div"> = PolymorphicProps<
74
  T,
75
  MenubarPrimitive.MenubarGroupProps<T>
76
> &
77
  Pick<ComponentProps<T>, "class">;
78

79
const MenubarGroup = <T extends ValidComponent = "div">(props: MenubarGroupProps<T>) => {
80
  const [local, others] = splitProps(props as MenubarGroupProps, ["class"]);
81
  return (
82
    <MenubarPrimitive.Group
83
      data-slot="menubar-group"
84
      class={cn("z-menubar-group", local.class)}
85
      {...others}
86
    />
87
  );
88
};
89

90
type MenubarItemProps<T extends ValidComponent = "div"> = PolymorphicProps<
91
  T,
92
  MenubarPrimitive.MenubarItemProps<T>
93
> &
94
  Pick<ComponentProps<T>, "class"> & {
95
    inset?: boolean;
96
    variant?: "default" | "destructive";
97
  };
98

99
const MenubarItem = <T extends ValidComponent = "div">(props: MenubarItemProps<T>) => {
100
  const mergedProps = mergeProps(
101
    { variant: "default", inset: false } as MenubarItemProps<T>,
102
    props,
103
  );
104
  const [local, others] = splitProps(mergedProps as MenubarItemProps, [
105
    "class",
106
    "inset",
107
    "variant",
108
  ]);
109
  return (
110
    <MenubarPrimitive.Item
111
      data-slot="menubar-item"
112
      data-inset={local.inset || undefined}
113
      data-variant={local.variant}
114
      class={cn(
115
        "group/menubar-item relative z-menubar-item flex cursor-default select-none items-center outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
116
        local.class,
117
      )}
118
      {...others}
119
    />
120
  );
121
};
122

123
type MenubarCheckboxItemProps<T extends ValidComponent = "div"> = PolymorphicProps<
124
  T,
125
  MenubarPrimitive.MenubarCheckboxItemProps<T>
126
> &
127
  Pick<ComponentProps<T>, "class" | "children">;
128

129
const MenubarCheckboxItem = <T extends ValidComponent = "div">(
130
  props: MenubarCheckboxItemProps<T>,
131
) => {
132
  const [local, others] = splitProps(props as MenubarCheckboxItemProps, ["class", "children"]);
133
  return (
134
    <MenubarPrimitive.CheckboxItem
135
      data-slot="menubar-checkbox-item"
136
      class={cn(
137
        "relative z-menubar-checkbox-item flex cursor-default select-none items-center outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
138
        local.class,
139
      )}
140
      {...others}
141
    >
142
      <span class="pointer-events-none absolute z-menubar-checkbox-item-indicator flex items-center justify-center">
143
        <MenubarPrimitive.ItemIndicator>
144
          <Check />
145
        </MenubarPrimitive.ItemIndicator>
146
      </span>
147
      {local.children}
148
    </MenubarPrimitive.CheckboxItem>
149
  );
150
};
151

152
type MenubarRadioGroupProps<T extends ValidComponent = "div"> = PolymorphicProps<
153
  T,
154
  MenubarPrimitive.MenubarRadioGroupProps<T>
155
> &
156
  Pick<ComponentProps<T>, "class">;
157

158
const MenubarRadioGroup = <T extends ValidComponent = "div">(props: MenubarRadioGroupProps<T>) => {
159
  const [local, others] = splitProps(props as MenubarRadioGroupProps, ["class"]);
160
  return (
161
    <MenubarPrimitive.RadioGroup
162
      data-slot="menubar-radio-group"
163
      class={cn("z-menubar-radio-group", local.class)}
164
      {...others}
165
    />
166
  );
167
};
168

169
type MenubarRadioItemProps<T extends ValidComponent = "div"> = PolymorphicProps<
170
  T,
171
  MenubarPrimitive.MenubarRadioItemProps<T>
172
> &
173
  Pick<ComponentProps<T>, "class" | "children">;
174

175
const MenubarRadioItem = <T extends ValidComponent = "div">(props: MenubarRadioItemProps<T>) => {
176
  const [local, others] = splitProps(props as MenubarRadioItemProps, ["class", "children"]);
177
  return (
178
    <MenubarPrimitive.RadioItem
179
      data-slot="menubar-radio-item"
180
      class={cn(
181
        "relative z-menubar-radio-item flex cursor-default select-none items-center outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
182
        local.class,
183
      )}
184
      {...others}
185
    >
186
      <span class="pointer-events-none absolute z-menubar-radio-item-indicator flex items-center justify-center">
187
        <MenubarPrimitive.ItemIndicator>
188
          <Check />
189
        </MenubarPrimitive.ItemIndicator>
190
      </span>
191
      {local.children}
192
    </MenubarPrimitive.RadioItem>
193
  );
194
};
195

196
type MenubarGroupLabelProps<T extends ValidComponent = "span"> = PolymorphicProps<
197
  T,
198
  MenubarPrimitive.MenubarGroupLabelProps<T>
199
> &
200
  Pick<ComponentProps<T>, "class"> & {
201
    inset?: boolean;
202
  };
203

204
const MenubarLabel = <T extends ValidComponent = "span">(props: MenubarGroupLabelProps<T>) => {
205
  const mergedProps = mergeProps({ inset: false } as MenubarGroupLabelProps<T>, props);
206
  const [local, others] = splitProps(mergedProps as MenubarGroupLabelProps, ["class", "inset"]);
207
  return (
208
    <MenubarPrimitive.GroupLabel
209
      data-slot="menubar-label"
210
      data-inset={local.inset || undefined}
211
      class={cn("z-menubar-label", local.class)}
212
      {...others}
213
    />
214
  );
215
};
216

217
type MenubarSeparatorProps<T extends ValidComponent = "hr"> = PolymorphicProps<
218
  T,
219
  MenubarPrimitive.MenubarSeparatorProps<T>
220
> &
221
  Pick<ComponentProps<T>, "class">;
222

223
const MenubarSeparator = <T extends ValidComponent = "hr">(props: MenubarSeparatorProps<T>) => {
224
  const [local, others] = splitProps(props as MenubarSeparatorProps, ["class"]);
225
  return (
226
    <MenubarPrimitive.Separator
227
      data-slot="menubar-separator"
228
      class={cn("z-menubar-separator -mx-1 my-1 h-px", local.class)}
229
      {...others}
230
    />
231
  );
232
};
233

234
type MenubarShortcutProps = ComponentProps<"span">;
235

236
const MenubarShortcut = (props: MenubarShortcutProps) => {
237
  const [local, others] = splitProps(props, ["class"]);
238
  return (
239
    <span
240
      data-slot="menubar-shortcut"
241
      class={cn("z-menubar-shortcut ml-auto", local.class)}
242
      {...others}
243
    />
244
  );
245
};
246

247
const MenubarSub: Component<MenubarPrimitive.MenubarSubProps> = (props) => {
248
  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
249
};
250

251
type MenubarSubTriggerProps<T extends ValidComponent = "div"> = PolymorphicProps<
252
  T,
253
  MenubarPrimitive.MenubarSubTriggerProps<T>
254
> &
255
  Pick<ComponentProps<T>, "class" | "children"> & {
256
    inset?: boolean;
257
  };
258

259
const MenubarSubTrigger = <T extends ValidComponent = "div">(props: MenubarSubTriggerProps<T>) => {
260
  const mergedProps = mergeProps({ inset: false } as MenubarSubTriggerProps<T>, props);
261
  const [local, others] = splitProps(mergedProps as MenubarSubTriggerProps, [
262
    "class",
263
    "inset",
264
    "children",
265
  ]);
266
  return (
267
    <MenubarPrimitive.SubTrigger
268
      data-slot="menubar-sub-trigger"
269
      data-inset={local.inset || undefined}
270
      class={cn(
271
        "z-menubar-sub-trigger flex cursor-default select-none items-center outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
272
        local.class,
273
      )}
274
      {...others}
275
    >
276
      {local.children}
277
      <ChevronRight class="ml-auto" />
278
    </MenubarPrimitive.SubTrigger>
279
  );
280
};
281

282
type MenubarSubContentProps<T extends ValidComponent = "div"> = PolymorphicProps<
283
  T,
284
  MenubarPrimitive.MenubarSubContentProps<T>
285
> &
286
  Pick<ComponentProps<T>, "class">;
287

288
const MenubarSubContent = <T extends ValidComponent = "div">(props: MenubarSubContentProps<T>) => {
289
  const [local, others] = splitProps(props as MenubarSubContentProps, ["class"]);
290
  return (
291
    <MenubarPrimitive.Portal>
292
      <MenubarPrimitive.SubContent
293
        data-slot="menubar-sub-content"
294
        class={cn("z-50 z-menubar-sub-content min-w-32 overflow-hidden", local.class)}
295
        {...others}
296
      />
297
    </MenubarPrimitive.Portal>
298
  );
299
};
300

301
export {
302
  Menubar,
303
  MenubarCheckboxItem,
304
  MenubarContent,
305
  MenubarGroup,
306
  MenubarItem,
307
  MenubarLabel,
308
  MenubarMenu,
309
  MenubarPortal,
310
  MenubarRadioGroup,
311
  MenubarRadioItem,
312
  MenubarSeparator,
313
  MenubarShortcut,
314
  MenubarSub,
315
  MenubarSubContent,
316
  MenubarSubTrigger,
317
  MenubarTrigger,
318
};

Examples

Here are the source code of all the examples from the preview page:

Basic

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "~/components/ui/menubar";

function MenubarBasic() {
  return (
    <Example title="Basic">
      <Menubar>
        <MenubarMenu>
          <MenubarTrigger>File</MenubarTrigger>
          <MenubarContent>
            <MenubarItem>
              New Tab <MenubarShortcut>⌘T</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              New Window <MenubarShortcut>⌘N</MenubarShortcut>
            </MenubarItem>
            <MenubarItem disabled>New Incognito Window</MenubarItem>
            <MenubarSeparator />
            <MenubarItem>
              Print... <MenubarShortcut>⌘P</MenubarShortcut>
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
          <MenubarTrigger>Edit</MenubarTrigger>
          <MenubarContent>
            <MenubarItem>
              Undo <MenubarShortcut>⌘Z</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
            </MenubarItem>
            <MenubarSeparator />
            <MenubarItem>Cut</MenubarItem>
            <MenubarItem>Copy</MenubarItem>
            <MenubarItem>Paste</MenubarItem>
          </MenubarContent>
        </MenubarMenu>
      </Menubar>
    </Example>
  );
}

With Submenu

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "~/components/ui/menubar";

function MenubarWithSubmenu() {
  return (
    <Example title="With Submenu">
      <Menubar>
        <MenubarMenu>
          <MenubarTrigger>File</MenubarTrigger>
          <MenubarContent>
            <MenubarSub>
              <MenubarSubTrigger>Share</MenubarSubTrigger>
              <MenubarSubContent>
                <MenubarItem>Email link</MenubarItem>
                <MenubarItem>Messages</MenubarItem>
                <MenubarItem>Notes</MenubarItem>
              </MenubarSubContent>
            </MenubarSub>
            <MenubarSeparator />
            <MenubarItem>
              Print... <MenubarShortcut>⌘P</MenubarShortcut>
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
          <MenubarTrigger>Edit</MenubarTrigger>
          <MenubarContent>
            <MenubarItem>
              Undo <MenubarShortcut>⌘Z</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
            </MenubarItem>
            <MenubarSeparator />
            <MenubarSub>
              <MenubarSubTrigger>Find</MenubarSubTrigger>
              <MenubarSubContent>
                <MenubarItem>Find...</MenubarItem>
                <MenubarItem>Find Next</MenubarItem>
                <MenubarItem>Find Previous</MenubarItem>
              </MenubarSubContent>
            </MenubarSub>
            <MenubarSeparator />
            <MenubarItem>Cut</MenubarItem>
            <MenubarItem>Copy</MenubarItem>
            <MenubarItem>Paste</MenubarItem>
          </MenubarContent>
        </MenubarMenu>
      </Menubar>
    </Example>
  );
}

With Checkboxes

import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "~/components/ui/menubar";

function MenubarWithCheckboxes() {
  return (
    <Example title="With Checkboxes">
      <Menubar>
        <MenubarMenu>
          <MenubarTrigger>View</MenubarTrigger>
          <MenubarContent class="w-64">
            <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
            <MenubarCheckboxItem checked>Always Show Full URLs</MenubarCheckboxItem>
            <MenubarSeparator />
            <MenubarItem inset>
              Reload <MenubarShortcut>⌘R</MenubarShortcut>
            </MenubarItem>
            <MenubarItem disabled inset>
              Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
          <MenubarTrigger>Format</MenubarTrigger>
          <MenubarContent>
            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>
            <MenubarCheckboxItem>Code</MenubarCheckboxItem>
            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>
          </MenubarContent>
        </MenubarMenu>
      </Menubar>
    </Example>
  );
}

With Radio

import { createSignal } from "solid-js";
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarTrigger,
} from "~/components/ui/menubar";

function MenubarWithRadio() {
  const [user, setUser] = createSignal("benoit");
  const [theme, setTheme] = createSignal("system");

  return (
    <Example title="With Radio">
      <Menubar>
        <MenubarMenu>
          <MenubarTrigger>Profiles</MenubarTrigger>
          <MenubarContent>
            <MenubarRadioGroup value={user()} onChange={setUser}>
              <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
              <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
              <MenubarRadioItem value="luis">Luis</MenubarRadioItem>
            </MenubarRadioGroup>
            <MenubarSeparator />
            <MenubarItem inset>Edit...</MenubarItem>
            <MenubarItem inset>Add Profile...</MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
          <MenubarTrigger>Theme</MenubarTrigger>
          <MenubarContent>
            <MenubarRadioGroup value={theme()} onChange={setTheme}>
              <MenubarRadioItem value="light">Light</MenubarRadioItem>
              <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
              <MenubarRadioItem value="system">System</MenubarRadioItem>
            </MenubarRadioGroup>
          </MenubarContent>
        </MenubarMenu>
      </Menubar>
    </Example>
  );
}

With Icons

import { CircleDashed, File, Folder, Save } from "lucide-solid";
import {
  Menubar,
  MenubarContent,
  MenubarGroup,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "~/components/ui/menubar";

function MenubarWithIcons() {
  return (
    <Example title="With Icons">
      <Menubar>
        <MenubarMenu>
          <MenubarTrigger>File</MenubarTrigger>
          <MenubarContent>
            <MenubarItem>
              <File />
              New File <MenubarShortcut>⌘N</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              <Folder />
              Open Folder
            </MenubarItem>
            <MenubarSeparator />
            <MenubarItem>
              <Save />
              Save <MenubarShortcut>⌘S</MenubarShortcut>
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
          <MenubarTrigger>More</MenubarTrigger>
          <MenubarContent>
            <MenubarGroup>
              <MenubarItem>
                <CircleDashed />
                Settings
              </MenubarItem>
              <MenubarItem>
                <CircleDashed />
                Help
              </MenubarItem>
              <MenubarSeparator />
              <MenubarItem variant="destructive">
                <CircleDashed />
                Delete
              </MenubarItem>
            </MenubarGroup>
          </MenubarContent>
        </MenubarMenu>
      </Menubar>
    </Example>
  );
}

With Shortcuts

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "~/components/ui/menubar";

function MenubarWithShortcuts() {
  return (
    <Example title="With Shortcuts">
      <Menubar>
        <MenubarMenu>
          <MenubarTrigger>File</MenubarTrigger>
          <MenubarContent>
            <MenubarItem>
              New Tab <MenubarShortcut>⌘T</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              New Window <MenubarShortcut>⌘N</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              Print... <MenubarShortcut>⌘P</MenubarShortcut>
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
          <MenubarTrigger>Edit</MenubarTrigger>
          <MenubarContent>
            <MenubarItem>
              Undo <MenubarShortcut>⌘Z</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
            </MenubarItem>
            <MenubarSeparator />
            <MenubarItem>
              Cut <MenubarShortcut>⌘X</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              Copy <MenubarShortcut>⌘C</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              Paste <MenubarShortcut>⌘V</MenubarShortcut>
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
      </Menubar>
    </Example>
  );
}

Format

import { Bold, Italic, Underline } from "lucide-solid";
import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "~/components/ui/menubar";

function MenubarFormat() {
  return (
    <Example title="Format">
      <Menubar>
        <MenubarMenu>
          <MenubarTrigger>Format</MenubarTrigger>
          <MenubarContent>
            <MenubarItem>
              <Bold />
              Bold <MenubarShortcut>⌘B</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              <Italic />
              Italic <MenubarShortcut>⌘I</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              <Underline />
              Underline <MenubarShortcut>⌘U</MenubarShortcut>
            </MenubarItem>
            <MenubarSeparator />
            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>
            <MenubarCheckboxItem>Code</MenubarCheckboxItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
          <MenubarTrigger>View</MenubarTrigger>
          <MenubarContent>
            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>
            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>
            <MenubarSeparator />
            <MenubarItem inset>Zoom In</MenubarItem>
            <MenubarItem inset>Zoom Out</MenubarItem>
          </MenubarContent>
        </MenubarMenu>
      </Menubar>
    </Example>
  );
}

Insert

import { Check, Image, Link, Search, Table } from "lucide-solid";
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "~/components/ui/menubar";

function MenubarInsert() {
  return (
    <Example title="Insert">
      <Menubar>
        <MenubarMenu>
          <MenubarTrigger>Insert</MenubarTrigger>
          <MenubarContent>
            <MenubarSub>
              <MenubarSubTrigger>
                <Image />
                Media
              </MenubarSubTrigger>
              <MenubarSubContent>
                <MenubarItem>Image</MenubarItem>
                <MenubarItem>Video</MenubarItem>
                <MenubarItem>Audio</MenubarItem>
              </MenubarSubContent>
            </MenubarSub>
            <MenubarSeparator />
            <MenubarItem>
              <Link />
              Link <MenubarShortcut>⌘K</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              <Table />
              Table
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
          <MenubarTrigger>Tools</MenubarTrigger>
          <MenubarContent class="w-44">
            <MenubarItem>
              <Search />
              Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              <Check />
              Spell Check
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
      </Menubar>
    </Example>
  );
}

Destructive

import { File, Folder, LogOut, Settings, Trash, User } from "lucide-solid";
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "~/components/ui/menubar";

function MenubarDestructive() {
  return (
    <Example title="Destructive">
      <Menubar>
        <MenubarMenu>
          <MenubarTrigger>File</MenubarTrigger>
          <MenubarContent class="w-40">
            <MenubarItem>
              <File />
              New File <MenubarShortcut>⌘N</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              <Folder />
              Open Folder
            </MenubarItem>
            <MenubarSeparator />
            <MenubarItem variant="destructive">
              <Trash />
              Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
          <MenubarTrigger>Account</MenubarTrigger>
          <MenubarContent>
            <MenubarItem>
              <User />
              Profile
            </MenubarItem>
            <MenubarItem>
              <Settings />
              Settings
            </MenubarItem>
            <MenubarSeparator />
            <MenubarItem variant="destructive">
              <LogOut />
              Sign out
            </MenubarItem>
            <MenubarSeparator />
            <MenubarItem variant="destructive">
              <Trash />
              Delete
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
      </Menubar>
    </Example>
  );
}

In Dialog

import { ClipboardPaste, Copy, Scissors, Trash } from "lucide-solid";
import { Button } from "~/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "~/components/ui/dialog";
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "~/components/ui/menubar";

function MenubarInDialog() {
  return (
    <Example title="In Dialog">
      <Dialog>
        <DialogTrigger as={Button} variant="outline">
          Open Dialog
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Menubar Example</DialogTitle>
            <DialogDescription>Use the menubar below to see the menu options.</DialogDescription>
          </DialogHeader>
          <Menubar>
            <MenubarMenu>
              <MenubarTrigger>File</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>
                  <Copy />
                  Copy
                </MenubarItem>
                <MenubarItem>
                  <Scissors />
                  Cut
                </MenubarItem>
                <MenubarItem>
                  <ClipboardPaste />
                  Paste
                </MenubarItem>
                <MenubarSeparator />
                <MenubarSub>
                  <MenubarSubTrigger>More Options</MenubarSubTrigger>
                  <MenubarSubContent>
                    <MenubarItem>Save Page...</MenubarItem>
                    <MenubarItem>Create Shortcut...</MenubarItem>
                    <MenubarItem>Name Window...</MenubarItem>
                    <MenubarSeparator />
                    <MenubarItem>Developer Tools</MenubarItem>
                  </MenubarSubContent>
                </MenubarSub>
                <MenubarSeparator />
                <MenubarItem variant="destructive">
                  <Trash />
                  Delete
                </MenubarItem>
              </MenubarContent>
            </MenubarMenu>
            <MenubarMenu>
              <MenubarTrigger>Edit</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>
                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>
                </MenubarItem>
                <MenubarItem>
                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
                </MenubarItem>
              </MenubarContent>
            </MenubarMenu>
          </Menubar>
        </DialogContent>
      </Dialog>
    </Example>
  );
}

Preview Docs

Build your own Zaidan

When you're done, click Setup Project to setup your new project.