Sidebar

Vertical navigation sidebar with a header, footer, sections, links, event-driven buttons, dividers, and an optional collapse toggle.

Installation

npx dafink-ui add sidebar

Also installs: Tooltip, Scroll-fade, Skeleton

Demos

Event-driven items with SidebarButton

SidebarButton renders the same pill as SidebarLink but as a <button>, for switching displayed content without touching the URL. Click a view below — the sliding indicator follows the selection exactly like it follows a route change.

Inbox — 12 unread messages.

Dynamic items with SidebarSkeleton

When nav items come from an API, render SidebarSkeleton in their place while the request is in flight, then swap in the real SidebarLink or SidebarButton items once the data arrives. Its rows match the height and padding of a real item, so the list does not jump. This demo holds the loading state.

Loading projects…

Composition

<SidebarButton />/* event-driven, no URL */

<SidebarSkeleton />/* placeholder rows while items load */

</SidebarSection>

</SidebarFooter>

</Sidebar>

Props

Name	Type	Default	Description
width	string	'w-56'	Tailwind width class used when expanded.
collapsedWidth	string	'w-16'	Tailwind width class used when collapsed.
collapsible	boolean	false	Renders the built-in expand/collapse toggle button.
collapsed	boolean	undefined	Controlled collapsed state. Omit to let Sidebar manage its own state.
defaultCollapsed	boolean	false	Initial collapsed state when uncontrolled.
onCollapsedChange	(collapsed: boolean) => void	undefined	Called whenever the toggle button changes the collapsed state.
togglePosition	'top' \| 'middle' \| 'bottom'	'middle'	Where the collapse toggle button sits along the right border.
className	string	''	Additional CSS classes.
children	ReactNode	undefined	Sidebar content (header, sections, links, dividers, footer).

Accessibility

Sidebar is a persistent layout landmark (<aside>), not a popup overlay, so none of the focus-trap/Escape/backdrop checklist applies. Its nav items use roving tabindex: only the active or last-focused item sits in the page's Tab order (tabIndex={0}, all others {-1}), so Tab moves into and out of the whole sidebar in one stop rather than stepping through every link and button; arrow keys move the roving position instead. The active item gets aria-current="page", and the collapse toggle is a real button with aria-expanded/aria-label.

Key	Function
`tab`	Moves focus to the sidebar's roving item (the active item, or the first item if none is active), or out to the next tabbable page element if focus is already inside.
`shift`+`tab`	Moves focus out of the sidebar to the previous tabbable element.
`down arrow`	Moves focus to the next item, wrapping from the last item to the first.
`up arrow`	Moves focus to the previous item, wrapping from the first item to the last.
`home`	Moves focus to the first item.
`end`	Moves focus to the last item.
`right arrow`	From a row with a trailing action control, dives into its first action; from inside an action group, moves to the next action.
`left arrow`	From inside an action group, moves to the previous action, or back out to the row from the first action.
`escape`	From inside a row's action group, moves focus back to the row.
`enter`	Activates the focused link or button.