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 */ />