# Sidebar: Loading

> `SidebarMenuSkeleton` fills a menu while it loads. Widths vary per row and match between server and client.

Example: https://hextaui.com/docs/sidebar/examples/skeleton
Component docs: https://hextaui.com/docs/sidebar.md

## Add this example

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

This adds `components/examples/sidebar/skeleton.tsx` with the Sidebar component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/sidebar/skeleton.tsx"
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"

export function SidebarSkeleton() {
  return (
    <SidebarProvider className="h-96 min-h-0">
      <Sidebar>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Projects</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {Array.from({ length: 6 }).map((_, index) => (
                  <SidebarMenuItem key={index}>
                    <SidebarMenuSkeleton showIcon />
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <header className="flex h-14 items-center px-4">
          <SidebarTrigger className="-ms-1" />
        </header>
      </SidebarInset>
    </SidebarProvider>
  )
}
```

## Props in this example

### SidebarMenuSkeleton

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `showIcon` | `boolean` | `false` |  |

## More Sidebar examples

- [Variants](https://hextaui.com/docs/sidebar/examples/variants.md)
- [Collapsible](https://hextaui.com/docs/sidebar/examples/collapsible.md)
- [Collapsible groups and submenus](https://hextaui.com/docs/sidebar/examples/submenus.md)
- [Right side](https://hextaui.com/docs/sidebar/examples/right.md)
- [Under a header](https://hextaui.com/docs/sidebar/examples/header.md)
- [Controlled](https://hextaui.com/docs/sidebar/examples/controlled.md)
- [Right to left](https://hextaui.com/docs/sidebar/examples/rtl.md)