Layout

Sidebar

Vertical navigation container with section support.

Built-in Link Support

Pass href and linkComponent directly on SidebarItem — no wrapper needed. Works with any router (Next.js, React Router, plain anchors).

'use client'

import React from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Sidebar } from 'biibaos'
import type { SidebarLinkSection } from 'biibaos'
import { BookOpen, Palette, Wrench } from 'lucide-react'

export default function App() {
  const pathname = usePathname()

  const links: SidebarLinkSection[] = [
    {
      title: 'Getting Started',
      items: [
        { label: 'Introduction', href: '/docs',    icon: <BookOpen size={14} />, navId: 'docs',    active: pathname === '/docs'    },
        { label: 'Theming',      href: '/theming', icon: <Palette  size={14} />, navId: 'theming', active: pathname === '/theming' },
        { label: 'Helpers',      href: '/helpers', icon: <Wrench   size={14} />, navId: 'helpers', active: pathname === '/helpers' },
      ],
    },
  ]

  return (
    <Sidebar
      width={240}
      links={links}
      linkComponent={Link}
    />
  )
}

Multiple Sections

Group items into labelled sections by passing multiple objects in the links array. Each section renders a SidebarSection heading automatically.

'use client'
import React from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Sidebar } from 'biibaos'
import type { SidebarLinkSection } from 'biibaos'
import { BookOpen, Palette, Zap, Settings } from 'lucide-react'

export default function App() {
  const pathname = usePathname()

  const links: SidebarLinkSection[] = [
    {
      title: 'Getting Started',
      items: [
        { label: 'Introduction', href: '/docs',    icon: <BookOpen size={14} />, active: pathname === '/docs'    },
        { label: 'Theming',      href: '/theming', icon: <Palette  size={14} />, active: pathname === '/theming' },
      ],
    },
    {
      title: 'Components',
      items: [
        { label: 'Button',  href: '/components/button',  icon: <Zap      size={14} />, active: pathname === '/components/button'  },
        { label: 'Sidebar', href: '/components/sidebar', icon: <Settings size={14} />, active: pathname === '/components/sidebar' },
      ],
    },
  ]

  return (
    <Sidebar
      width={240}
      links={links}
      linkComponent={Link}
    />
  )
}

Nested Sub-Items

Add subItems to any item for nested navigation. On desktop they appear as a right-side popover; on mobile they expand as an accordion. Sub-items support href, linkComponent, icon, badge, and onClick.

'use client'

import React from 'react'
import Link from 'next/link'
import { Sidebar } from 'biibaos'
import type { SidebarLinkSection } from 'biibaos'
import { Users, FileText } from 'lucide-react'

export default function App() {
  const links: SidebarLinkSection[] = [
    {
      title: 'Management',
      items: [
        {
          label: 'Users',
          icon: <Users size={14} />,
          subItems: [
            { label: 'Team Members',        href: '/users/team'         },
            { label: 'Roles & Permissions', href: '/users/roles'        },
            { label: 'Invites',             href: '/users/invites'      },
          ],
        },
        {
          label: 'Billing',
          icon: <FileText size={14} />,
          subItems: [
            { label: 'All Invoices',        href: '/billing/invoices'   },
            { label: 'Recurring Settings',  href: '/billing/recurring'  },
          ],
        },
      ],
    },
  ]

  return (
    <Sidebar width={240} links={links} linkComponent={Link} />
  )
}

Responsive Bottom Nav

At ≤ 900 px the sidebar automatically hides and renders a macOS dock-style bottom nav from items that have a navId. Items without navId stay sidebar-only. Pass autoNav={false} to opt out.

Resize your window below 900 px to see the bottom nav appear.

Items with navId register in the dock. Items without navId stay sidebar-only.

'use client'

import React, { useState } from 'react'
import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'
import { Sidebar } from 'biibaos'
import type { SidebarLinkSection } from 'biibaos'
import { BookOpen, Palette, Wrench } from 'lucide-react'

export default function App() {
  const pathname = usePathname()
  const router = useRouter()
  const [isOpen, setIsOpen] = useState(false)

  const links: SidebarLinkSection[] = [
    {
      title: 'Getting Started',
      items: [
        // navId → appears in the bottom dock on small screens
        { label: 'Introduction', href: '/docs',    icon: <BookOpen size={14} />, navId: 'docs',    active: pathname === '/docs'    },
        { label: 'Theming',      href: '/theming', icon: <Palette  size={14} />, navId: 'theming', active: pathname === '/theming' },
        // no navId → sidebar-only, never shown in the dock
        { label: 'Helpers',      href: '/helpers', icon: <Wrench   size={14} />,                   active: pathname === '/helpers' },
      ],
    },
  ]

  const handleNavChange = (id: string) => {
    const item = links.flatMap(s => s.items).find(i => i.navId === id)
    if (item?.href) router.push(item.href)
  }

  return (
    <Sidebar
      fixed
      stickyTop="58px"
      width={240}
      links={links}
      linkComponent={Link}
      isOpen={isOpen}
      onOpen={() => setIsOpen(true)}
      onClose={() => setIsOpen(false)}
      activeId={links.flatMap(s => s.items).find(i => i.active)?.navId}
      onNavChange={handleNavChange}
      showNavLabels
    />
  )
}

Properties

Prop	Type	Default	Description
`links`	`SidebarLinkSection[]`	—	Declarative nav config. Pass sections with items and Sidebar renders everything — headings, icons, badges, sub-items, links.
`linkComponent`	`React.ElementType`	—	Default link component for all items (e.g. Next.js Link). Can be overridden per item via item.linkComponent.
`width`	`number \| string`	240	Sidebar width in pixels or any CSS unit.
`fixed`	`boolean`	—	Renders the sidebar as position: fixed.
`stickyTop`	`number \| string`	—	Top offset when using fixed layout (e.g. "58px" to clear a navbar).
`isOpen`	`boolean`	—	Controls the mobile drawer open state.
`onOpen`	`() => void`	—	Called when the user swipes to open the mobile drawer.
`onClose`	`() => void`	—	Called when the user closes the mobile drawer.
`autoNav`	`boolean`	true	At ≤ 900 px the sidebar hides and a dock-style bottom nav renders automatically. Set false to opt out.
`activeId`	`string`	—	The navId of the currently active item. Keeps the bottom nav icon lit correctly.
`onNavChange`	`(id: string) => void`	—	Called when the user taps an item in the bottom nav. Use it to push the correct route.
`showNavLabels`	`boolean`	true	Show text labels under icons in the bottom nav.
`children`	`React.ReactNode`	—	Optional composed children (SidebarHeader, SidebarFooter, etc.). Rendered after links sections.
`item.label`	`React.ReactNode`	—	(SidebarLinkItem) The item label text.
`item.href`	`string`	—	(SidebarLinkItem) URL to navigate to when clicked.
`item.linkComponent`	`React.ElementType`	—	(SidebarLinkItem) Per-item link component override. Defaults to the Sidebar-level linkComponent.
`item.icon`	`React.ReactNode`	—	(SidebarLinkItem) Icon displayed before the label.
`item.activeIcon`	`React.ReactNode`	—	(SidebarLinkItem) Alternate icon for the active state.
`item.badge`	`React.ReactNode`	—	(SidebarLinkItem) Badge displayed after the label.
`item.active`	`boolean`	—	(SidebarLinkItem) Highlights the item as the current active route.
`item.navId`	`string`	—	(SidebarLinkItem) Registers this item in the auto bottom nav. Items without navId are sidebar-only.
`item.subItems`	`SidebarLinkSubItem[]`	—	(SidebarLinkItem) Nested items — accordion on mobile, popover on desktop. Each supports href, linkComponent, label, icon, badge, active, onClick.
`item.onClick`	`(e: React.MouseEvent) => void`	—	(SidebarLinkItem) Click handler. Fires even when href is set.

Navbar

Stack