# Sidebar: Variants

> `variant` sets the look: a full-height `sidebar`, a `floating` panel, or `inset`, where the page becomes a card on the sidebar color. Switch between them to see the layout animate.

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

## Add this example

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

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

## Source

```tsx title="components/examples/sidebar/variants.tsx"
"use client"

import * as React from "react"
import {
  IconHome,
  IconInbox,
  IconSearch,
  IconSettings,
} from "@tabler/icons-react"

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

type Variant = "sidebar" | "floating" | "inset"

const items = [
  { title: "Home", icon: IconHome },
  { title: "Inbox", icon: IconInbox },
  { title: "Search", icon: IconSearch },
  { title: "Settings", icon: IconSettings },
]

export function SidebarVariants() {
  const [variant, setVariant] = React.useState<Variant>("inset")
  const [active, setActive] = React.useState("Home")

  return (
    <SidebarProvider className="h-112 min-h-0">
      <Sidebar variant={variant}>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Application</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {items.map((item) => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton
                      isActive={active === item.title}
                      onClick={() => setActive(item.title)}
                    >
                      <item.icon />
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <header className="flex h-14 items-center gap-2 px-4">
          <SidebarTrigger className="-ms-1" />
          <ToggleGroup
            aria-label="Variant"
            value={[variant]}
            onValueChange={(value) => {
              if (value[0]) {
                setVariant(value[0] as Variant)
              }
            }}
          >
            <ToggleGroupItem value="sidebar">Sidebar</ToggleGroupItem>
            <ToggleGroupItem value="floating">Floating</ToggleGroupItem>
            <ToggleGroupItem value="inset">Inset</ToggleGroupItem>
          </ToggleGroup>
        </header>
      </SidebarInset>
    </SidebarProvider>
  )
}
```

## Props in this example

### Sidebar

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"sidebar" \| "floating" \| "inset" \| "plain"` | `"sidebar"` | plain drops the surface, the edge line, the scrollbar and the gap between menu items, for a sidebar that sits on the page. |

### SidebarMenuButton

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `isActive` | `boolean` | `false` | Highlights it and sets aria-current="page". |

## More Sidebar examples

- [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)
- [Loading](https://hextaui.com/docs/sidebar/examples/skeleton.md)
- [Right to left](https://hextaui.com/docs/sidebar/examples/rtl.md)