# Menubar: Icons

> Put an icon before the label. Use `variant="destructive"` on items that delete or can't be undone.

Example: https://hextaui.com/docs/menubar/examples/icons
Component docs: https://hextaui.com/docs/menubar.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/menubar-icons.json
```

This adds `components/examples/menubar/icons.tsx` with the Menubar component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/menubar/icons.tsx"
import {
  IconCopy,
  IconDownload,
  IconFilePlus,
  IconFolderOpen,
  IconScissors,
  IconTrash,
} from "@tabler/icons-react"

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

export function MenubarIcons() {
  return (
    <Menubar aria-label="Files">
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <IconFilePlus />
            New file
            <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <IconFolderOpen />
            Open…
            <MenubarShortcut>⌘O</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <IconDownload />
            Export
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem variant="destructive">
            <IconTrash />
            Move to trash
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <IconScissors />
            Cut
            <MenubarShortcut>⌘X</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <IconCopy />
            Copy
            <MenubarShortcut>⌘C</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}
```

## More Menubar examples

- [Trigger icons](https://hextaui.com/docs/menubar/examples/trigger-icons.md)
- [Disabled](https://hextaui.com/docs/menubar/examples/disabled.md)
- [Vertical](https://hextaui.com/docs/menubar/examples/vertical.md)
- [Right to left](https://hextaui.com/docs/menubar/examples/rtl.md)