Navigation

Sidebar

Compound component: `Sidebar`, `Sidebar.Section`, `Sidebar.Item`, `Sidebar.Toggle`.

Client component4 exportsSource

Import

import { Sidebar, SidebarItem, SidebarSection, SidebarToggle } from '@the_viveksingh/vivek-ui'

App navigation

SidebarToggle collapses it to icons only. The collapsed width is a custom property, so your CSS can change it without a prop.

<Sidebar collapsible label="Dashboard" width="15rem">
  <SidebarToggle />
  <SidebarSection title="Overview">
    <SidebarItem href="/dashboard" active>Home</SidebarItem>
    <SidebarItem href="/analytics">Analytics</SidebarItem>
  </SidebarSection>
  <SidebarSection title="Billing">
    <SidebarItem href="/invoices" badge={<Badge tone="warning">3</Badge>}>Invoices</SidebarItem>
    <SidebarItem href="/payments">Payments</SidebarItem>
  </SidebarSection>
</Sidebar>

Fixed width

Leave collapsible off when there is room and the toggle would be clutter.

<Sidebar label="Dashboard" width="15rem">
  {/* sections */}
</Sidebar>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Sidebar
PropTypeDefaultDescription
collapsibleboolean—Allow the icons-only mode at all. Default `true`.
collapsedboolean—Controlled collapsed state.
defaultCollapsedboolean—Initial collapsed state while uncontrolled. Default `false`.
onCollapsedChange(collapsed: boolean) => void——
widthstring—Expanded width, as any CSS length. Default `16rem`. Sets `--vk-sidebar-width` on the element, so it can equally be set from a stylesheet.
side'start' | 'end'—Which edge the rail is attached to. Logical, so it follows the writing direction.
labelstring—Accessible name for the `nav`. Defaults to `"Sidebar"`.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Exports

SidebarSidebarItemSidebarSectionSidebarToggle

Rendering