Sidebar

Sectioned admin navigation. Items either navigate (href) or report selection via onSelect(key). Pairs with AppShell.


import { Sidebar } from '@gg-software/ui';
 
<Sidebar
    activeKey={active}
    onSelect={(key) => setActive(key)}
    sections={[
        {
            title: 'Shop',
            items: [
                { key: 'orders', label: 'Orders', icon: <OrdersIcon /> },
                { key: 'products', label: 'Products', href: '/products' },
            ],
        },
    ]}
    collapsed={isCollapsed}
/>;

Props

Prop	Type	Default
`sections`*	`SidebarSection[]`	—
`activeKey`	`string`	—
`onSelect`	`((key: string) => void)`	—
`collapsed`	`boolean`	`false`
`className`	`string`	—

* required · generated from packages/ui/src/navigation/Sidebar/Sidebar.tsx

Types


type SidebarSection = {
    title?: ReactNode;
    items: SidebarItem[];
};
 
type SidebarItem = {
    key: string;
    label: ReactNode;
    icon?: ReactNode;
    href?: string;
};