Skip to main content

Sidebar

Sidebar is a navigation aid that lets people move between an app's main sections, such as a dashboard, inbox, or settings.

Import

import { Sidebar } from '@vortexlabs/vortex';
import type { SidebarProps } from '@vortexlabs/vortex';

Allied components

Drawer Dropdown Menu List Item

Other links

Sidebar.Root

Sidebar.Root props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value
`collapsed`	`boolean`	No default value
`defaultCollapsed`	`boolean`	`false`
`onCollapsedChange`	`callback`	No default value

Sidebar.Nav

Sidebar.Nav props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value
`ariaLabel`	`string`	`Main`
`divider`	`boolean`	`true`
`className`	`union`	No default value
`attributes`	`object`	No default value

Sidebar.Header

Sidebar.Header props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value
`collapseAriaLabel`	`string`	`Collapse sidebar`
`expandAriaLabel`	`string`	`Expand sidebar`
`closeAriaLabel`	`string`	`Close sidebar`

Sidebar.Content

Sidebar.Content props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value

Sidebar.Group

Sidebar.Group props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value
`label`	`React.ReactNode`	No default value
`collapsible`	`boolean`	No default value
`defaultExpanded`	`boolean`	`true`

Sidebar.Item

Sidebar.Item props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value
`href`	`string`	No default value
`openInNewTab`	`boolean`	No default value
`icon`	`component`	No default value
`endIcon`	`component`	No default value
`count`	`union`	No default value
`countAriaLabel`	`string`	No default value
`current`	`boolean`	No default value
`disabled`	`boolean`	`false`
`onClick`	`callback`	No default value
`render`	`callback`	No default value
`className`	`union`	No default value
`attributes`	`object`	No default value

Sidebar.Parent

Sidebar.Parent props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value
`label`	`React.ReactNode`	No default value
`icon`	`component`	No default value
`defaultExpanded`	`boolean`	`false`

Sidebar.Callout

Sidebar.Callout props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value

Sidebar.Footer

Sidebar.Footer props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value
`divider`	`boolean`	No default value

Sidebar.Account

Sidebar.Account props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value
`name`	`string`	No default value
`initials`	`string`	No default value
`description`	`string`	No default value
`avatarSrc`	`string`	No default value

Sidebar.Trigger

Sidebar.Trigger props
Prop	Type	Default	Attributes
`children`	`callback`	No default value