# Sidebar

Collapsible navigation sidebar with mobile support

## 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`      | -           |
| `variant`     | `enum` |          | `sidebar`   | -           |
| `collapsible` | `enum` |          | `offcanvas` | -           |

### 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` | -           |

### 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` | -           |

### 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` | -           |
| `showOnHover` | `boolean` |          | `false` | -           |

### 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`   | -           |
| `isActive` | `boolean`                                                         |          | `false`   | -           |
| `tooltip`  | `string \| (TooltipContentProps & RefAttributes<HTMLDivElement>)` |          | -         | -           |
| `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` | -           |

### 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` | -           |
| `size`     | `enum`    |          | `md`    | -           |
| `isActive` | `boolean` |          | `false` | -           |

### 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`  | -           |
| `open`         | `boolean`                   |          | -       | -           |
| `onOpenChange` | `((open: boolean) => void)` |          | -       | -           |

### 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 component extends standard HTML element attributes.

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

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

<useSidebar /* props */ />

```
