Sidebar

Collapsible navigation sidebar with mobile support

Example

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

Collapsible navigation sidebar with mobile support

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

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

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	Render as child element instead of default tag

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	Render as child element instead of default tag

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	Render as child element instead of default tag
showOnHover	boolean		false	Only show when parent menu item is hovered

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

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	Show a circular icon placeholder alongside the text skeleton

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

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	Initial open state for uncontrolled usage
open	boolean		-	Controlled open state
onOpenChange	((open: boolean) => void)		-	Callback when open state changes

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 hook takes no parameters.

Usage

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

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