Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Sidebar

Collapsible navigation sidebar with mobile support

## Sidebar​

Collapsible navigation sidebar with mobile support

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`side` | `enum` |  | `left` | -
`variant` | `enum` |  | `sidebar` | -
`collapsible` | `enum` |  | `offcanvas` | -

### Usage​

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

    <Sidebar /* props */ />

## SidebarContent​

Scrollable content area within the sidebar

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <SidebarContent /* props */ />

## SidebarFooter​

Footer section at the bottom of the sidebar

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <SidebarFooter /* props */ />

## SidebarGroup​

Container for grouping related sidebar items

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <SidebarGroup /* props */ />

## SidebarGroupAction​

Action button displayed next to a sidebar group label

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`asChild` | `boolean` |  | `false` | -

### Usage​

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

    <SidebarGroupAction /* props */ />

## SidebarGroupContent​

Content container for sidebar group items

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <SidebarGroupContent /* props */ />

## SidebarGroupLabel​

Label heading for a sidebar group

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`asChild` | `boolean` |  | `false` | -

### Usage​

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

    <SidebarGroupLabel /* props */ />

## SidebarHeader​

Header section at the top of the sidebar

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <SidebarHeader /* props */ />

## SidebarInput​

Input field styled for use within the sidebar

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <SidebarInput /* props */ />

## SidebarInset​

Main content area that adapts to sidebar state

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <SidebarInset /* props */ />

## SidebarMenu​

Navigation menu list within the sidebar

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <SidebarMenu /* props */ />

## SidebarMenuAction​

Action button displayed alongside a menu item

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`asChild` | `boolean` |  | `false` | -
`showOnHover` | `boolean` |  | `false` | -

### Usage​

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

    <SidebarMenuAction /* props */ />

## SidebarMenuBadge​

Badge for displaying counts or status on menu items

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <SidebarMenuBadge /* props */ />

## SidebarMenuButton​

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

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

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

    <SidebarMenuButton /* props */ />

## SidebarMenuItem​

Individual menu item within the sidebar

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <SidebarMenuItem /* props */ />

## SidebarMenuSkeleton​

Loading skeleton placeholder for menu items

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

### Props​

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

### Usage​

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

    <SidebarMenuSkeleton /* props */ />

## SidebarMenuSub​

Submenu list for nested navigation items

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <SidebarMenuSub /* props */ />

## SidebarMenuSubButton​

Button for submenu items

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`asChild` | `boolean` |  | `false` | -
`size` | `enum` |  | `md` | -
`isActive` | `boolean` |  | `false` | -

### Usage​

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

    <SidebarMenuSubButton /* props */ />

## SidebarMenuSubItem​

Individual item within a sidebar submenu

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <SidebarMenuSubItem /* props */ />

## SidebarProvider​

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`defaultOpen` | `boolean` |  | `true` | -
`open` | `boolean` |  | - | -
`onOpenChange` | `((open: boolean) => void)` |  | - | -

### Usage​

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

    <SidebarProvider /* props */ />

## SidebarRail​

Clickable rail element for toggling sidebar visibility

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <SidebarRail /* props */ />

## SidebarSeparator​

Visual separator between sidebar sections

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

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

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

    <SidebarSeparator /* props */ />

## SidebarTrigger​

Button that toggles the sidebar open and closed

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

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

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

    <SidebarTrigger /* props */ />

## useSidebar​

Hook to access sidebar state and controls

Source: `packages/appkit-ui/src/react/ui/sidebar.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <useSidebar /* props */ />