# Sidebar

Collapsible navigation sidebar with mobile support

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
import {
    Button,
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuGroup,
    DropdownMenuItem,
    DropdownMenuTrigger,
    Sidebar,
    SidebarContent,
    SidebarGroup,
    SidebarGroupContent,
    SidebarGroupLabel,
    SidebarHeader,
    SidebarInput,
    SidebarInset,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarProvider,
    SidebarRail,
    SidebarTrigger,
    Item,
    ItemActions,
    ItemContent,
    ItemDescription,
    ItemTitle,
    Label,
} from "@databricks/appkit-ui/react"
import { useState } from "react"

export default function SidebarExample() {
    const data = {
        versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
        navMain: [
            {
                title: "Getting Started",
                url: "#",
                items: [
                    {
                        title: "Installation",
                        url: "#",
                    },
                    {
                        title: "Project Structure",
                        url: "#",
                    },
                ],
            },
            {
                title: "Build Your Application",
                url: "#",
                items: [
                    {
                        title: "Routing",
                        url: "#",
                    },
                    {
                        title: "Data Fetching",
                        url: "#",
                        isActive: true,
                    },
                    {
                        title: "Rendering",
                        url: "#",
                    },
                    {
                        title: "Caching",
                        url: "#",
                    },
                    {
                        title: "Styling",
                        url: "#",
                    },
                    {
                        title: "Optimizing",
                        url: "#",
                    },
                    {
                        title: "Configuring",
                        url: "#",
                    },
                    {
                        title: "Testing",
                        url: "#",
                    },
                    {
                        title: "Authentication",
                        url: "#",
                    },
                    {
                        title: "Deploying",
                        url: "#",
                    },
                    {
                        title: "Upgrading",
                        url: "#",
                    },
                    {
                        title: "Examples",
                        url: "#",
                    },
                ],
            },
            {
                title: "API Reference",
                url: "#",
                items: [
                    {
                        title: "Components",
                        url: "#",
                    },
                    {
                        title: "File Conventions",
                        url: "#",
                    },
                    {
                        title: "Functions",
                        url: "#",
                    },
                    {
                        title: "next.config.js Options",
                        url: "#",
                    },
                    {
                        title: "CLI",
                        url: "#",
                    },
                    {
                        title: "Edge Runtime",
                        url: "#",
                    },
                ],
            },
            {
                title: "Architecture",
                url: "#",
                items: [
                    {
                        title: "Accessibility",
                        url: "#",
                    },
                    {
                        title: "Fast Refresh",
                        url: "#",
                    },
                    {
                        title: "Next.js Compiler",
                        url: "#",
                    },
                    {
                        title: "Supported Browsers",
                        url: "#",
                    },
                    {
                        title: "Turbopack",
                        url: "#",
                    },
                ],
            },
        ],
    }

    const [selectedVersion, setSelectedVersion] = useState(data.versions[0])

    return (
        <SidebarProvider>
            <Sidebar>
                <SidebarHeader>
                    <SidebarMenu>
                        <SidebarMenuItem>
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <SidebarMenuButton
                                        size="lg"
                                        className="data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground"
                                    >
                                        <Item className="p-0 w-full" size="sm">
                                            <ItemContent>
                                                <ItemTitle className="text-sm">Documentation</ItemTitle>
                                                <ItemDescription>v{selectedVersion}</ItemDescription>
                                            </ItemContent>
                                            <ItemActions className="ml-auto">
                                                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="size-4 shrink-0 opacity-50"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                            </ItemActions>
                                        </Item>
                                    </SidebarMenuButton>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent>
                                    <DropdownMenuGroup>
                                        {data.versions.map((version) => (
                                            <DropdownMenuItem
                                                key={version}
                                                onSelect={() => setSelectedVersion(version)}
                                            >
                                                v{version}{" "}
                                                {version === selectedVersion && (
                                                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ml-auto size-4"><path d="M20 6 9 17l-5-5"/></svg>
                                                )}
                                            </DropdownMenuItem>
                                        ))}
                                    </DropdownMenuGroup>
                                </DropdownMenuContent>
                            </DropdownMenu>
                        </SidebarMenuItem>
                    </SidebarMenu>
                    <form>
                        <SidebarGroup className="py-0">
                            <SidebarGroupContent className="relative">
                                <Label htmlFor="search" className="sr-only">
                                    Search
                                </Label>
                                <SidebarInput
                                    id="search"
                                    placeholder="Search the docs..."
                                    className="pl-8"
                                />
                                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
                            </SidebarGroupContent>
                        </SidebarGroup>
                    </form>
                </SidebarHeader>
                <SidebarContent>
                    {data.navMain.map((item) => (
                        <SidebarGroup key={item.title}>
                            <SidebarGroupLabel>{item.title}</SidebarGroupLabel>
                            <SidebarGroupContent>
                                <SidebarMenu>
                                    {item.items.map((subItem) => (
                                        <SidebarMenuItem key={subItem.title}>
                                            <SidebarMenuButton asChild isActive={subItem.isActive}>
                                                <a href={subItem.url}>{subItem.title}</a>
                                            </SidebarMenuButton>
                                        </SidebarMenuItem>
                                    ))}
                                </SidebarMenu>
                            </SidebarGroupContent>
                        </SidebarGroup>
                    ))}
                </SidebarContent>
                <SidebarRail />
            </Sidebar>
            <SidebarInset>
                <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
                    <SidebarTrigger className="-ml-1" />
                </header>
                <div className="flex flex-1 flex-col gap-4 p-4">
                    <div className="grid auto-rows-min gap-4 md:grid-cols-3">
                        <div className="bg-muted/50 aspect-video rounded-xl" />
                        <div className="bg-muted/50 aspect-video rounded-xl" />
                        <div className="bg-muted/50 aspect-video rounded-xl" />
                    </div>
                    <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
                </div>
            </SidebarInset>
        </SidebarProvider>
    )
}

```

## Sidebar[​](#sidebar-1 "Direct link to Sidebar")

Collapsible navigation sidebar with mobile support

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props "Direct link to Props")

| Prop          | Type   | Required | Default     | Description                                                                                                                           |
| ------------- | ------ | -------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| `side`        | `enum` |          | `left`      | Which side of the viewport the sidebar appears on                                                                                     |
| `variant`     | `enum` |          | `sidebar`   | Visual style: `"sidebar"` (standard with border), `"floating"` (rounded with shadow), or `"inset"` (content area gets rounded margin) |
| `collapsible` | `enum` |          | `offcanvas` | Collapse behavior: `"offcanvas"` (slides off-screen), `"icon"` (collapses to icon width), or `"none"` (always expanded)               |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { Sidebar } from '@databricks/appkit-ui';

<Sidebar /* props */ />

```

## SidebarContent[​](#sidebarcontent "Direct link to SidebarContent")

Scrollable content area within the sidebar

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-1 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-1 "Direct link to Usage")

```tsx
import { SidebarContent } from '@databricks/appkit-ui';

<SidebarContent /* props */ />

```

## SidebarFooter[​](#sidebarfooter "Direct link to SidebarFooter")

Footer section at the bottom of the sidebar

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-2 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-2 "Direct link to Usage")

```tsx
import { SidebarFooter } from '@databricks/appkit-ui';

<SidebarFooter /* props */ />

```

## SidebarGroup[​](#sidebargroup "Direct link to SidebarGroup")

Container for grouping related sidebar items

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-3 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-3 "Direct link to Usage")

```tsx
import { SidebarGroup } from '@databricks/appkit-ui';

<SidebarGroup /* props */ />

```

## SidebarGroupAction[​](#sidebargroupaction "Direct link to SidebarGroupAction")

Action button displayed next to a sidebar group label

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-4 "Direct link to Props")

| Prop      | Type      | Required | Default | Description                                    |
| --------- | --------- | -------- | ------- | ---------------------------------------------- |
| `asChild` | `boolean` |          | `false` | Render as child element instead of default tag |

### Usage[​](#usage-4 "Direct link to Usage")

```tsx
import { SidebarGroupAction } from '@databricks/appkit-ui';

<SidebarGroupAction /* props */ />

```

## SidebarGroupContent[​](#sidebargroupcontent "Direct link to SidebarGroupContent")

Content container for sidebar group items

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-5 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-5 "Direct link to Usage")

```tsx
import { SidebarGroupContent } from '@databricks/appkit-ui';

<SidebarGroupContent /* props */ />

```

## SidebarGroupLabel[​](#sidebargrouplabel "Direct link to SidebarGroupLabel")

Label heading for a sidebar group

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-6 "Direct link to Props")

| Prop      | Type      | Required | Default | Description                                    |
| --------- | --------- | -------- | ------- | ---------------------------------------------- |
| `asChild` | `boolean` |          | `false` | Render as child element instead of default tag |

### Usage[​](#usage-6 "Direct link to Usage")

```tsx
import { SidebarGroupLabel } from '@databricks/appkit-ui';

<SidebarGroupLabel /* props */ />

```

## SidebarHeader[​](#sidebarheader "Direct link to SidebarHeader")

Header section at the top of the sidebar

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-7 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-7 "Direct link to Usage")

```tsx
import { SidebarHeader } from '@databricks/appkit-ui';

<SidebarHeader /* props */ />

```

## SidebarInput[​](#sidebarinput "Direct link to SidebarInput")

Input field styled for use within the sidebar

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-8 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-8 "Direct link to Usage")

```tsx
import { SidebarInput } from '@databricks/appkit-ui';

<SidebarInput /* props */ />

```

## SidebarInset[​](#sidebarinset "Direct link to SidebarInset")

Main content area that adapts to sidebar state

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-9 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-9 "Direct link to Usage")

```tsx
import { SidebarInset } from '@databricks/appkit-ui';

<SidebarInset /* props */ />

```

## SidebarMenu[​](#sidebarmenu "Direct link to SidebarMenu")

Navigation menu list within the sidebar

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-10 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-10 "Direct link to Usage")

```tsx
import { SidebarMenu } from '@databricks/appkit-ui';

<SidebarMenu /* props */ />

```

## SidebarMenuAction[​](#sidebarmenuaction "Direct link to SidebarMenuAction")

Action button displayed alongside a menu item

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-11 "Direct link to Props")

| Prop          | Type      | Required | Default | Description                                    |
| ------------- | --------- | -------- | ------- | ---------------------------------------------- |
| `asChild`     | `boolean` |          | `false` | Render as child element instead of default tag |
| `showOnHover` | `boolean` |          | `false` | Only show when parent menu item is hovered     |

### Usage[​](#usage-11 "Direct link to Usage")

```tsx
import { SidebarMenuAction } from '@databricks/appkit-ui';

<SidebarMenuAction /* props */ />

```

## SidebarMenuBadge[​](#sidebarmenubadge "Direct link to SidebarMenuBadge")

Badge for displaying counts or status on menu items

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-12 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-12 "Direct link to Usage")

```tsx
import { SidebarMenuBadge } from '@databricks/appkit-ui';

<SidebarMenuBadge /* props */ />

```

## SidebarMenuButton[​](#sidebarmenubutton "Direct link to SidebarMenuButton")

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-13 "Direct link to Props")

| Prop       | Type                                                              | Required | Default   | Description                                          |
| ---------- | ----------------------------------------------------------------- | -------- | --------- | ---------------------------------------------------- |
| `asChild`  | `boolean`                                                         |          | `false`   | Render as child element instead of default tag       |
| `isActive` | `boolean`                                                         |          | `false`   | Whether this item is currently active/selected       |
| `tooltip`  | `string \| (TooltipContentProps & RefAttributes<HTMLDivElement>)` |          | -         | Tooltip shown when sidebar is collapsed to icon mode |
| `variant`  | `"default" \| "outline" \| null`                                  |          | `default` | -                                                    |
| `size`     | `"default" \| "sm" \| "lg" \| null`                               |          | `default` | -                                                    |

### Usage[​](#usage-13 "Direct link to Usage")

```tsx
import { SidebarMenuButton } from '@databricks/appkit-ui';

<SidebarMenuButton /* props */ />

```

## SidebarMenuItem[​](#sidebarmenuitem "Direct link to SidebarMenuItem")

Individual menu item within the sidebar

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-14 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-14 "Direct link to Usage")

```tsx
import { SidebarMenuItem } from '@databricks/appkit-ui';

<SidebarMenuItem /* props */ />

```

## SidebarMenuSkeleton[​](#sidebarmenuskeleton "Direct link to SidebarMenuSkeleton")

Loading skeleton placeholder for menu items

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-15 "Direct link to Props")

| Prop       | Type      | Required | Default | Description                                                  |
| ---------- | --------- | -------- | ------- | ------------------------------------------------------------ |
| `showIcon` | `boolean` |          | `false` | Show a circular icon placeholder alongside the text skeleton |

### Usage[​](#usage-15 "Direct link to Usage")

```tsx
import { SidebarMenuSkeleton } from '@databricks/appkit-ui';

<SidebarMenuSkeleton /* props */ />

```

## SidebarMenuSub[​](#sidebarmenusub "Direct link to SidebarMenuSub")

Submenu list for nested navigation items

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-16 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-16 "Direct link to Usage")

```tsx
import { SidebarMenuSub } from '@databricks/appkit-ui';

<SidebarMenuSub /* props */ />

```

## SidebarMenuSubButton[​](#sidebarmenusubbutton "Direct link to SidebarMenuSubButton")

Button for submenu items

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-17 "Direct link to Props")

| Prop       | Type      | Required | Default | Description                                            |
| ---------- | --------- | -------- | ------- | ------------------------------------------------------ |
| `asChild`  | `boolean` |          | `false` | Render as child element instead of default tag         |
| `size`     | `enum`    |          | `md`    | Text size of the submenu button                        |
| `isActive` | `boolean` |          | `false` | Whether this submenu item is currently active/selected |

### Usage[​](#usage-17 "Direct link to Usage")

```tsx
import { SidebarMenuSubButton } from '@databricks/appkit-ui';

<SidebarMenuSubButton /* props */ />

```

## SidebarMenuSubItem[​](#sidebarmenusubitem "Direct link to SidebarMenuSubItem")

Individual item within a sidebar submenu

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-18 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-18 "Direct link to Usage")

```tsx
import { SidebarMenuSubItem } from '@databricks/appkit-ui';

<SidebarMenuSubItem /* props */ />

```

## SidebarProvider[​](#sidebarprovider "Direct link to SidebarProvider")

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-19 "Direct link to Props")

| Prop           | Type                        | Required | Default | Description                               |
| -------------- | --------------------------- | -------- | ------- | ----------------------------------------- |
| `defaultOpen`  | `boolean`                   |          | `true`  | Initial open state for uncontrolled usage |
| `open`         | `boolean`                   |          | -       | Controlled open state                     |
| `onOpenChange` | `((open: boolean) => void)` |          | -       | Callback when open state changes          |

### Usage[​](#usage-19 "Direct link to Usage")

```tsx
import { SidebarProvider } from '@databricks/appkit-ui';

<SidebarProvider /* props */ />

```

## SidebarRail[​](#sidebarrail "Direct link to SidebarRail")

Clickable rail element for toggling sidebar visibility

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-20 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-20 "Direct link to Usage")

```tsx
import { SidebarRail } from '@databricks/appkit-ui';

<SidebarRail /* props */ />

```

## SidebarSeparator[​](#sidebarseparator "Direct link to SidebarSeparator")

Visual separator between sidebar sections

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-21 "Direct link to Props")

| Prop          | Type      | Required | Default    | Description                                                                                                                                                                          |
| ------------- | --------- | -------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `orientation` | `enum`    |          | `vertical` | Either `vertical` or `horizontal`. Defaults to `horizontal`.                                                                                                                         |
| `decorative`  | `boolean` |          | -          | Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree. |
| `asChild`     | `boolean` |          | -          | -                                                                                                                                                                                    |

### Usage[​](#usage-21 "Direct link to Usage")

```tsx
import { SidebarSeparator } from '@databricks/appkit-ui';

<SidebarSeparator /* props */ />

```

## SidebarTrigger[​](#sidebartrigger "Direct link to SidebarTrigger")

Button that toggles the sidebar open and closed

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-22 "Direct link to Props")

| Prop      | Type                                                                                  | Required | Default | Description |
| --------- | ------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
| `variant` | `"link" \| "default" \| "destructive" \| "secondary" \| "outline" \| "ghost" \| null` |          | -       | -           |
| `size`    | `"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg" \| null`               |          | -       | -           |
| `asChild` | `boolean`                                                                             |          | -       | -           |

### Usage[​](#usage-22 "Direct link to Usage")

```tsx
import { SidebarTrigger } from '@databricks/appkit-ui';

<SidebarTrigger /* props */ />

```

## useSidebar[​](#usesidebar "Direct link to useSidebar")

Hook to access sidebar state and controls

**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx)

### Props[​](#props-23 "Direct link to Props")

This hook takes no parameters.

### Usage[​](#usage-23 "Direct link to Usage")

```tsx
import { useSidebar } from '@databricks/appkit-ui';

function MyComponent() {
  const sidebar = useSidebar();
}

```