Zaidan

Sidebar (Inset)

A sidebar variant that appears inset within the main content area, creating a distinct visual separation with the background.

Installation

See the Sidebar component for installation instructions.

Features

Inset appearance within the content area
Perfect for table of contents or secondary navigation
Works well on the right side of the page
Maintains visual hierarchy with the main content

Props

Prop	Type	Value	Description
`variant`	`string`	`"inset"`	Enables inset visual style
`side`	`string`	`"right"`	Positions sidebar on the right

Examples

Here is the source code of the example from the preview page:

Inset Variant

import { For, Show } from "solid-js";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "~/components/ui/breadcrumb";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
} from "~/components/ui/sidebar";

export default function SidebarInsetExample() {
  return (
    <SidebarProvider>
      <SidebarInset>
        <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem class="hidden md:block">
                <BreadcrumbLink href="#">Building Your Application</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator class="hidden md:block" />
              <BreadcrumbItem>
                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
          <SidebarTrigger class="-mr-1 ml-auto rotate-180" />
        </header>
        <div class="flex flex-1 flex-col gap-4 p-4">
          <div class="grid auto-rows-min gap-4 md:grid-cols-3">
            <div class="aspect-video rounded-xl bg-muted/50" />
            <div class="aspect-video rounded-xl bg-muted/50" />
            <div class="aspect-video rounded-xl bg-muted/50" />
          </div>
          <div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
        </div>
      </SidebarInset>
      <Sidebar variant="inset" side="right">
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                <For each={data.navMain}>
                  {(item) => (
                    <SidebarMenuItem>
                      <SidebarMenuButton as="a" href={item.url} class="font-medium">
                        {item.title}
                      </SidebarMenuButton>
                      <Show when={item.items?.length}>
                        <SidebarMenuSub>
                          <For each={item.items}>
                            {(subItem) => (
                              <SidebarMenuSubItem>
                                <SidebarMenuSubButton
                                  as="a"
                                  href={subItem.url}
                                  isActive={subItem.isActive}
                                >
                                  {subItem.title}
                                </SidebarMenuSubButton>
                              </SidebarMenuSubItem>
                            )}
                          </For>
                        </SidebarMenuSub>
                      </Show>
                    </SidebarMenuItem>
                  )}
                </For>
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
        <SidebarRail />
      </Sidebar>
    </SidebarProvider>
  );
}