Sidebar

The full collapsible application sidebar kit.

A kit of twenty-odd parts for building an application’s navigation. If you’d rather just hand over an array of nav items, AppShell gets you there faster.

import {
  Sidebar,
  SidebarProvider,
  SidebarInset,
  SidebarTrigger,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarGroupContent,
  SidebarGroupAction,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubItem,
  SidebarMenuSubButton,
  SidebarSeparator,
  SidebarInput,
  SidebarRail,
  useSidebar,
} from "@squadbase/vantage/ui";

The skeleton

SidebarProvider owns the open/closed state; Sidebar and SidebarInset (the content side) sit inside it.

<SidebarProvider>
  <Sidebar>
    <SidebarHeader>Acme Analytics</SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Analytics</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton isActive>Overview</SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton>Sales</SidebarMenuButton>
              <SidebarMenuBadge>12</SidebarMenuBadge>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
    <SidebarRail />
  </Sidebar>

  <SidebarInset>
    <SidebarTrigger />
    {children}
  </SidebarInset>
</SidebarProvider>

Worth knowing

Making items links

import { Link } from "@squadbase/vantage/router";

<SidebarMenuButton render={<Link to="/sales" />}>Sales</SidebarMenuButton>;