Skip to main content
Our new developer certification is live!

Sidebar

Sticky sidebar container for page content.

Props

PropTypeRequiredDefaultDescription
childrenReactNodeYes-Content to display in sidebar
classNamestringNo-Additional CSS classes

Usage

import Sidebar from '@/components/atoms/Sidebar';

<Sidebar>
  <TableOfContents headings={headings} />
  <TaxonomyTags taxonomies={taxonomies} />
</Sidebar>

Features

  • Sticky positioning: Sticks to top (top-32) when scrolling
  • Responsive: Hidden on mobile/tablet, visible on large screens (lg:block)
  • Fixed width: 256px (w-64) on desktop
  • Self-start: Aligns to start of flex container

Notes

  • Hidden on screens smaller than lg breakpoint
  • Uses sticky positioning with top-32 offset
  • Commonly used with TableOfContents and TaxonomyTags components