# Menubar: Vertical

> `orientation="vertical"` stacks the menus and switches navigation to the up and down arrows. Open the menus to the side with `side="inline-end"`.

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

## Add this example

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

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

## Source

```tsx title="components/examples/menubar/vertical.tsx"
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarTrigger,
} from "@/components/ui/menubar"

const menus = [
  { label: "Projects", items: ["All projects", "Starred", "Archived"] },
  { label: "Team", items: ["Members", "Roles", "Invitations"] },
  { label: "Billing", items: ["Plan", "Invoices", "Payment method"] },
]

export function MenubarVertical() {
  return (
    <Menubar aria-label="Workspace" orientation="vertical">
      {menus.map((menu) => (
        <MenubarMenu key={menu.label}>
          <MenubarTrigger>{menu.label}</MenubarTrigger>
          <MenubarContent side="inline-end" align="start" sideOffset={8}>
            {menu.items.map((item) => (
              <MenubarItem key={item}>{item}</MenubarItem>
            ))}
          </MenubarContent>
        </MenubarMenu>
      ))}
    </Menubar>
  )
}
```

## Props in this example

### Menubar

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |  |

### MenubarContent

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `side` | `"top" \| "bottom" \| "left" \| "right" \| "inline-start" \| "inline-end"` | `"bottom"` |  |
| `align` | `"start" \| "center" \| "end"` | `"start"` |  |
| `sideOffset` | `number` | `8` |  |

## More Menubar examples

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