Haedong
043

Sidebar

Navigation

active: Field

Customize

Height

Code

<Sidebar label="Components">
  <SidebarGroup label="Form">
    <SidebarItem href="/work/input">Input</SidebarItem>
    <SidebarItem href="/work/field" active>Field</SidebarItem>
  </SidebarGroup>
  <SidebarGroup label="Overlay">
    <SidebarItem asChild>
      <Link href="/work/sheet">Sheet</Link>
    </SidebarItem>
  </SidebarGroup>
</Sidebar>

Install

npx shadcn@latest add https://components.haedong.dev/r/sidebar.json

Props

Sidebar extends the native nav props and sits on a Scroll Area; SidebarGroup (div props) renders a label and a list linked by aria-labelledby; SidebarItem (anchor props) renders one li > a, or with asChild styles the link you pass (a router Link). There is no collapse and no mobile drawer: hide it with a breakpoint class and put a phone menu in a Sheet.

PropTypeDescription
labelstringSidebar: accessible name of the nav. SidebarGroup: the muted heading over its items.
stickybooleanSidebar: stick to the top and cap the height at the viewport. Defaults to true.
activebooleanSidebarItem: current page — full-strength text and aria-current="page".
asChildbooleanSidebarItem: apply the styles to the child element instead of rendering an <a>.