Sidebar
The account navigation: a collapsible rail on desktop and a drawer on mobile, with grouped items and a footer.
<Sidebar mode="static">
<SidebarHeader>Sproutboat</SidebarHeader>
<SidebarNav label="Account">
<SidebarItem href="/" icon={<HomeIcon />}>
Home
</SidebarItem>
<SidebarItem href="/sprouts" icon={<FolderIcon />} current trailing={<Badge>4</Badge>}>
Sprouts
</SidebarItem>
<SidebarItem href="/logs" icon={<LogsIcon />}>
Logs
</SidebarItem>
</SidebarNav>
</Sidebar>Props
current
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/sidebar.jsonThe CLI writes components/ikada/sidebar.tsx and merges the ikada theme into your CSS. It also installs the components it is built from: Tooltip. Or take it from the package: import { Sidebar, SidebarHeader, SidebarFooter, SidebarNav, SidebarItem, SidebarToggle, SidebarTrigger } from "@sproutboat/ikada";
Usage
import { Sidebar, SidebarHeader, SidebarFooter, SidebarNav, SidebarItem, SidebarToggle, SidebarTrigger } from "@/components/ikada/sidebar";
<Sidebar mode="static">
<SidebarHeader>Sproutboat</SidebarHeader>
<SidebarNav label="Account">
<SidebarItem href="/" icon={<HomeIcon />}>
Home
</SidebarItem>
<SidebarItem href="/sprouts" icon={<FolderIcon />} current trailing={<Badge>4</Badge>}>
Sprouts
</SidebarItem>
<SidebarItem href="/logs" icon={<LogsIcon />}>
Logs
</SidebarItem>
</SidebarNav>
</Sidebar>Examples
<Sidebar mode="static">
<SidebarHeader>
<span className="truncate font-semibold">Sproutboat</span>
</SidebarHeader>
<SidebarNav label="Account">
<SidebarItem href="/" icon={<HomeIcon />} current>
Home
</SidebarItem>
<SidebarItem href="/sprouts" icon={<FolderIcon />} trailing={<Badge>4</Badge>}>
Sprouts
</SidebarItem>
<SidebarItem href="/logs" icon={<LogsIcon />}>
Logs
</SidebarItem>
</SidebarNav>
</Sidebar>const { collapsed, setCollapsed } = useSidebarState();
<Sidebar mode="static" collapsed={collapsed}>
<SidebarHeader>
<span className="truncate font-semibold">Sproutboat</span>
</SidebarHeader>
<SidebarNav label="Account">
<SidebarItem href="/" icon={<HomeIcon />} current>
Home
</SidebarItem>
<SidebarItem href="/sprouts" icon={<FolderIcon />} trailing={<Badge>4</Badge>}>
Sprouts
</SidebarItem>
<SidebarItem href="/logs" icon={<LogsIcon />}>
Logs
</SidebarItem>
</SidebarNav>
<SidebarFooter>
<SidebarToggle collapsed={collapsed} onCollapsedChange={setCollapsed} />
</SidebarFooter>
</Sidebar>const { open, setOpen } = useSidebarState();
<SidebarTrigger onClick={() => setOpen(true)} />
<Sidebar mode="drawer" open={open} onOpenChange={setOpen}>
<SidebarHeader>
<span className="truncate font-semibold">Sproutboat</span>
</SidebarHeader>
<SidebarNav label="Account">
<SidebarItem href="/" icon={<HomeIcon />} current>
Home
</SidebarItem>
<SidebarItem href="/sprouts" icon={<FolderIcon />}>
Sprouts
</SidebarItem>
<SidebarItem href="/logs" icon={<LogsIcon />}>
Logs
</SidebarItem>
</SidebarNav>
</Sidebar>Props
| Prop | Type | Description |
|---|---|---|
| childrenrequired | ReactNode | Sidebar content: a header, nav and footer. |
| mode | "auto" | "static" | "drawer" | `static` is always a column, `drawer` is always an overlay, `auto` switches at 768px. Default `auto`. |
| collapsed | boolean | Icon-only rail (desktop only). Controlled. Default `false`. |
| open | boolean | Mobile drawer state. Controlled. Default `false`. |
| onOpenChange | ((open: boolean) => void) | Called with the new open state when it opens or closes. |
| drawerLabel | string | Accessible name of the drawer dialog. Default `Navigation`. |
Also takes every prop of Omit<ComponentProps<"aside">, "children">.
| Prop | Type | Description |
|---|---|---|
| href | string | Plain destination. With a router, leave it out and pass `render={<RouterLink to="/x" />}`. |
| icon | ReactNode | Icon before the label. |
| current | boolean | Marks the page you are on: `aria-current="page"` and a raised fill. Default `false`. |
| trailing | ReactNode | Trailing text or a Badge, hidden in the rail. |
| childrenrequired | string | The item's label. |
| render | ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}> | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| className | string | Classes merged onto the root element, after ikada's own. |
Also takes every prop of WithClass<Omit<useRender.ComponentProps<"a">, "children">>.
| Prop | Type | Description |
|---|---|---|
| collapsedrequired | boolean | — |
| onCollapsedChangerequired | (collapsed: boolean) => void | — |
| Prop | Type | Description |
|---|---|---|
| label | string | Default `Open navigation`. |
Source: src/components/sidebar.tsx