# Menubar: Trigger icons

> Put an icon before a trigger's label, or use an icon on its own with an `aria-label`. Icon-only triggers get a square shape.

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

## Add this example

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

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

## Source

```tsx title="components/examples/menubar/trigger-icons.tsx"
import {
  IconAdjustmentsHorizontal,
  IconDots,
  IconFolder,
  IconLayoutGrid,
  IconPencil,
} from "@tabler/icons-react"

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

export function MenubarTriggerIcons() {
  return (
    <Menubar aria-label="Project">
      <MenubarMenu>
        <MenubarTrigger>
          <IconFolder />
          Project
        </MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Open…</MenubarItem>
          <MenubarItem>Duplicate</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>
          <IconPencil />
          Edit
        </MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Rename</MenubarItem>
          <MenubarItem>Move</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>
          <IconLayoutGrid />
          View
        </MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Grid</MenubarItem>
          <MenubarItem>List</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger aria-label="More">
          <IconDots />
        </MenubarTrigger>
        <MenubarContent align="end">
          <MenubarItem>
            <IconAdjustmentsHorizontal />
            Preferences
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem variant="destructive">Delete project</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}
```

## Props in this example

### MenubarContent

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `align` | `"start" \| "center" \| "end"` | `"start"` |  |

## More Menubar examples

- [Icons](https://hextaui.com/docs/menubar/examples/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)