---
title: "Organization menu"
description: "The organization at the top of AppShell’s sidebar: its logo and name, opening a menu with its whole name, the app’s items and Switch organization. On the rail only the logo shows; while it loads, a placeholder holds its place."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Organization menu

## In the sidebar

```tsx
import { GearSixIcon } from '@phosphor-icons/react';
import { MenuItem, OrganizationMenu } from '@arbol-ai/ui';

const LOGO =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%230d8273'/%3E%3Cpath d='M16 7v18M7 16h18' stroke='white' stroke-width='5'/%3E%3C/svg%3E";

<div className="rounded-card w-[250px] border px-4 py-4">
  <OrganizationMenu logo={LOGO} name="Clínica Norte" onSwitch={() => undefined}>
    <MenuItem href="#/organization-menu" icon={<GearSixIcon />}>
      Settings
    </MenuItem>
  </OrganizationMenu>
</div>
```

## Without a logo, on the rail

A building stands in for the logo; the rail shows the button alone and opens the menu beside it.

```tsx
import { OrganizationMenu } from '@arbol-ai/ui';

<div className="rounded-card flex w-[60px] justify-center border px-2 py-4">
  <OrganizationMenu isCollapsed name="Óptica Sur" onSwitch={() => undefined} />
</div>
```

## Loading

```tsx
import { OrganizationMenu } from '@arbol-ai/ui';

<div className="rounded-card w-[250px] border px-4 py-4">
  <OrganizationMenu isLoading name="Organization" onSwitch={() => undefined} />
</div>
```

## Source

The examples above are [`src/blocks/organization-menu/organization-menu.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/blocks/organization-menu/organization-menu.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/blocks/organization-menu/index.mdx