XiodUI
HomeDocs
OverviewComponentsStyling & CustomizationChangelog

Components

  • Accordion
  • Agent Steps
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Autocomplete
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Button Split
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Circular Progress
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy To Clipboard
  • Corner Badge
  • Dashboard Grid
  • Date Picker
  • Dialog
  • Dot Matrix
  • Draggable
    Updated
  • Drawer
  • Empty
  • Field
  • Fieldset
  • File Upload
    Updated
  • Form
  • Frame
  • Gauge
  • Grid
  • Group
  • Input
  • Input Group
  • Input OTP
  • Input Payment
  • Input Phone
    Updated
  • Input Sensitive
  • Kbd
  • Kinetic Click
  • Label
  • List Box
    Updated
  • Loader
  • Marker
  • Menu
  • Menubar
  • Message
  • Meter
  • Morphic Toast
  • Navigation Menu
  • Number Field
  • Option Picker
  • Orb
  • Pagination
  • Popover
  • Preview Card
    Updated
  • Progress
  • Radio
  • Resizable
  • Ruler Picker
  • Scroll Area
  • Scroll Bar
  • Select
  • Separator
  • Sidebar
  • Skeleton
  • Slider
  • Sortable
  • Switch
  • Table
  • Tabs
  • Text
  • Textarea
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Toolbar
  • Tooltip
  • Waveform
  • Wheel Picker

Loading...

Preview Skeleton

Installation Skeleton

Usage Skeleton

API Reference Skeleton

Sponsors

Support the development of XiodUI and help us build the best component library on Earth.

+++
Sponsor on GitHub

Sidebar

Previous: SeparatorNext: Skeleton

A collapsible side panel for app navigation.

Preview

Loading Preview...

Installation

bun add xiod-ui

Usage

Imports

1import {2  Sidebar,3  SidebarContent,4  SidebarFooter,5  SidebarGroup,6  SidebarGroupAction,7  SidebarGroupContent,8  SidebarGroupLabel,9  SidebarHeader,10  SidebarInput,11  SidebarInset,12  SidebarMenu,13  SidebarMenuAction,14  SidebarMenuBadge,15  SidebarMenuButton,16  SidebarMenuItem,17  SidebarMenuSkeleton,18  SidebarMenuSub,19  SidebarMenuSubButton,20  SidebarMenuSubItem,21  SidebarProvider,22  SidebarRail,23  SidebarSeparator,24  SidebarTrigger25} from "xiod-ui/sidebar";

Anatomy

1<SidebarProvider>2  <Sidebar>3    <SidebarContent>4      <SidebarGroup>5        <SidebarGroupLabel />6        <SidebarGroupContent>7          <SidebarMenu>8            <SidebarMenuItem>9              <SidebarMenuButton />10            </SidebarMenuItem>11          </SidebarMenu>12        </SidebarGroupContent>13      </SidebarGroup>14    </SidebarContent>15  </Sidebar>16  <SidebarTrigger />17</SidebarProvider>

API Reference

Detailed documentation of properties and options.

Sidebar

Accepts every native <div> attribute.

PropTypeDefaultDescription
collapsible
"none"|"icon"|"offcanvas"
offcanvas

How the sidebar collapses: offcanvas slides it out of view, icon shrinks it to a strip of icons, and

SeparatorSkeleton
none
keeps it open.
labels
Partial<SidebarLabels>
–

Replaces the built-in text of this sidebar and its parts. Takes precedence over LabelsProvider.

side
"left"|"right"
left

The side of the screen the sidebar sits on.

variant
"modal"|"inset"|"sidebar"|"floating"
sidebar

The visual style of the component.

SidebarContent

Accepts every native <div> attribute.

SidebarFooter

Accepts render, plus every native <div> attribute.

SidebarGroup

Accepts render, plus every native <div> attribute.

SidebarGroupAction

Accepts render, plus every native <button> attribute.

SidebarGroupContent

Accepts render, plus every native <div> attribute.

SidebarGroupLabel

Accepts render, plus every native <div> attribute.

SidebarHeader

Accepts render, plus every native <div> attribute.

SidebarInput

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
defaultValue
string | number | readonly string[]
–

The default value of the input. Use when uncontrolled.

nativeInput
boolean
–

Whether to render a plain <input> instead of Base UI's Input. A plain input doesn't register with a surrounding Field.

onValueChange
((value: string, eventDetails: Input.ChangeEventDetails) => void)
–

Callback fired when the value changes. Use when controlled.

size
number|"lg"|"sm"|"default"
default

The size of the component.

unstyled
boolean
–

Whether to drop the border, background and focus ring, leaving only the text field. Use inside your own styled container.

value
string | number | readonly string[]
–

The value of the input. Use when controlled.

SidebarInset

Accepts render, plus every native <main> attribute.

SidebarMenu

Accepts render, plus every native <ul> attribute.

SidebarMenuAction

Accepts render, plus every native <button> attribute.

PropTypeDefaultDescription
showOnHover
boolean
false

Whether the action is hidden on larger screens until its menu item is hovered or focused.

SidebarMenuBadge

Accepts render, plus every native <div> attribute.

SidebarMenuButton

Accepts render, plus every native <button> attribute.

PropTypeDefaultDescription
isActive
boolean
false

Whether the button is for the current page or view. Highlights it.

size
"lg"|"sm"|"default"
default

The size of the component.

tooltip
string | React$1.ComponentProps<typeof TooltipPopup>
–

A tooltip shown beside the button while the sidebar is collapsed to icons: its text, or props for TooltipPopup.

variant
"default"|"outline"
default

The visual style of the component.

SidebarMenuItem

Accepts render, plus every native <li> attribute.

SidebarMenuSkeleton

Accepts render, plus every native <div> attribute.

PropTypeDefaultDescription
showIcon
boolean
false

Whether the placeholder includes a square for an icon.

SidebarMenuSub

Accepts render, plus every native <ul> attribute.

SidebarMenuSubButton

Accepts render, plus every native <a> attribute.

PropTypeDefaultDescription
isActive
boolean
false

Whether the link is for the current page or view. Highlights it.

size
"md"|"sm"
md

The size of the component.

SidebarMenuSubItem

Accepts render, plus every native <li> attribute.

SidebarProvider

Accepts every native <div> attribute.

PropTypeDefaultDescription
cookieName
string|false
sidebar_state

The cookie that remembers whether the sidebar is expanded. false stores nothing.

defaultOpen
boolean
true

Whether the sidebar is expanded at first, when it isn't controlled. To restore the last state on the server, read the cookie named by cookieName and pass it here.

keyboardShortcut
string|false
b

The key that toggles the sidebar together with ⌘ (macOS) or Ctrl. false turns the shortcut off.

onOpenChange
((open: boolean) => void)
–

Called when the sidebar expands or collapses on larger screens, including through the keyboard shortcut.

open
boolean
–

Whether the sidebar is expanded on larger screens. Use with onOpenChange to control it. On mobile, the sidebar opens as a sheet with its own state.

SidebarRail

Accepts render, plus every native <button> attribute.

SidebarSeparator

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
orientation
"horizontal"|"vertical"
'horizontal'

The orientation of the separator.

SidebarTrigger

Accepts render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
icon
ReactNode
–

Replaces this icon. Accepts any node; null renders no icon. Takes precedence over IconProvider.

size
"lg"|"sm"|"default"|"xl"|"xs"|"icon"|"icon-lg"|"icon-sm"|"icon-xl"|"icon-xs"
default

The size of the component.

variant
"link"|"default"|"destructive"|"outline"|"secondary"|"destructive-outline"|"ghost"
default

The visual style of the component.