1

Collapsible

A sidebar that folds down to its icons: actions with icons, a list of recent pages that fades out when folded, and the account at the bottom. Folded, the mark turns into the expand button on hover.

Dependencies

@hugeicons/react@hugeicons/core-free-iconsmotion

Interaction Type

An aside with a labelled nav and plain link lists; the current page has aria-current and an accent icon. Toggles are buttons with aria-expanded and aria-controls. Below the medium breakpoint the sidebar becomes a sheet opened from a menu button: focus moves in and is trapped, Escape or the backdrop closes it, and focus returns to the menu button. Only transform and clip-path animate, and reduced motion turns it off.

Props

Options you can pass to customize this component.

Prop
Type
Description
actions
{ id: string; label: string; href: string; icon?: ReactNode }[]

Links that stay visible as icons when the sidebar is folded.

recents
SidebarItem[]

Text only links under the actions, hidden while folded.

recentsLabel
string

Heading of the recent list.

user
{ name: string; detail?: string; href: string }

Account link at the bottom, with initials drawn from the name.

value
string

Controlled id of the current item. It gets aria-current="page".

defaultValue
string

Initial current item when uncontrolled.

onValueChange
(id: string) => void

Called with the item id when a link is pressed.

open
boolean

Controlled state: whether the sidebar is unfolded from the medium breakpoint.

defaultOpen
boolean

Initial state when uncontrolled. Defaults to true.

onOpenChange
(open: boolean) => void

Called when the toggle is pressed.

brand
string

Name beside the mark.

brandHref
string

Where the brand link points.

expandLabel, collapseLabel
string

Accessible names of the fold buttons.

title
ReactNode

Heading of the page area. Defaults to the label of the current item.

children
ReactNode

Content of the page area. Defaults to a placeholder layout.

sidebarLabel, navLabel, menuLabel, closeLabel
string

Accessible names of the sidebar, its navigation and the mobile menu buttons, all overridable for localization.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/sidebar-collapsible.json

How to use

<SidebarCollapsible
  open={unfolded}
  onOpenChange={setUnfolded}
  recents={recentPages}
  user={{ name: 'Mira Tan', detail: 'mira@nexvyn.dev', href: '/account' }}
>
  <Editor />
</SidebarCollapsible>

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
acme.app/dashboard

Release notes 2.4

npx shadcn@latest addhttps://ui.nexvyn.dev/r/sidebar-collapsible.json