Documentation Sidebar

blocklayout

Docs-style sidebar with a version switcher at the top, a search input below, and collapsible navigation groups. All sample data inlined so consumers edit routes in place.

Installation

$pnpm dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/sidebar-03.json

$npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/sidebar-03.json

$yarn dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/sidebar-03.json

$bunx shadcn-svelte@latest add https://uipkge.dev/r/svelte/sidebar-03.json

Manifest:https://uipkge.dev/r/svelte/sidebar-03.jsonInstalls to:src/lib/components/blocks/sidebar-03/

Variants

Loading interactive previews…

npm dependencies

@lucide/svelte

Includes

sidebar collapsible dropdown-menu label

Files installed (4)

src/lib/components/blocks/sidebar-03/Sidebar03.svelte5 kB

<script lang="ts">
  import { ChevronRight } from '@lucide/svelte'
  import SearchForm from './SearchForm.svelte'
  import VersionSwitcher from './VersionSwitcher.svelte'
  import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '$lib/components/ui/collapsible'
  import {
    Sidebar,
    SidebarContent,
    SidebarGroup,
    SidebarGroupContent,
    SidebarGroupLabel,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarRail,
  } from '$lib/components/ui/sidebar'

  interface NavChild {
    title: string
    url: string
    isActive?: boolean
  }

  interface NavGroup {
    title: string
    url: string
    items: NavChild[]
  }

  // This is sample data.
  const data: { versions: string[]; navMain: NavGroup[] } = {
    versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],
    navMain: [
      {
        title: 'Getting Started',
        url: '#',
        items: [
          {
            title: 'Installation',
            url: '#',
          },
          {
            title: 'Project Structure',
            url: '#',
          },
        ],
      },
      {
        title: 'Building Your Application',
        url: '#',
        items: [
          {
            title: 'Routing',
            url: '#',
          },
          {
            title: 'Data Fetching',
            url: '#',
            isActive: true,
          },
          {
            title: 'Rendering',
            url: '#',
          },
          {
            title: 'Caching',
            url: '#',
          },
          {
            title: 'Styling',
            url: '#',
          },
          {
            title: 'Optimizing',
            url: '#',
          },
          {
            title: 'Configuring',
            url: '#',
          },
          {
            title: 'Testing',
            url: '#',
          },
          {
            title: 'Authentication',
            url: '#',
          },
          {
            title: 'Deploying',
            url: '#',
          },
          {
            title: 'Upgrading',
            url: '#',
          },
          {
            title: 'Examples',
            url: '#',
          },
        ],
      },
      {
        title: 'API Reference',
        url: '#',
        items: [
          {
            title: 'Components',
            url: '#',
          },
          {
            title: 'File Conventions',
            url: '#',
          },
          {
            title: 'Functions',
            url: '#',
          },
          {
            title: 'next.config.js Options',
            url: '#',
          },
          {
            title: 'CLI',
            url: '#',
          },
          {
            title: 'Edge Runtime',
            url: '#',
          },
        ],
      },
      {
        title: 'Architecture',
        url: '#',
        items: [
          {
            title: 'Accessibility',
            url: '#',
          },
          {
            title: 'Fast Refresh',
            url: '#',
          },
          {
            title: 'Next.js Compiler',
            url: '#',
          },
          {
            title: 'Supported Browsers',
            url: '#',
          },
          {
            title: 'Turbopack',
            url: '#',
          },
        ],
      },
      {
        title: 'Community',
        url: '#',
        items: [
          {
            title: 'Contribution Guide',
            url: '#',
          },
        ],
      },
    ],
  }
</script>

<Sidebar data-slot="sidebar-03">
  <SidebarHeader>
    <VersionSwitcher versions={data.versions} defaultVersion={data.versions[0]!} />
    <SearchForm />
  </SidebarHeader>
  <SidebarContent class="gap-0">
    {#each data.navMain as item (item.title)}
      <Collapsible title={item.title} defaultOpen class="group/collapsible">
        <SidebarGroup>
          <SidebarGroupLabel
            class="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm"
          >
            {#snippet child({ props: labelProps })}
              <CollapsibleTrigger {...labelProps}>
                {item.title}
                <ChevronRight class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
              </CollapsibleTrigger>
            {/snippet}
          </SidebarGroupLabel>
          <CollapsibleContent>
            <SidebarGroupContent>
              <SidebarMenu>
                {#each item.items as childItem (childItem.title)}
                  <SidebarMenuItem>
                    <SidebarMenuButton isActive={childItem.isActive}>
                      {#snippet child({ props })}
                        <a href={childItem.url} {...props}>{childItem.title}</a>
                      {/snippet}
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                {/each}
              </SidebarMenu>
            </SidebarGroupContent>
          </CollapsibleContent>
        </SidebarGroup>
      </Collapsible>
    {/each}
  </SidebarContent>
  <SidebarRail />
</Sidebar>

src/lib/components/blocks/sidebar-03/SearchForm.svelte0.6 kB

src/lib/components/blocks/sidebar-03/VersionSwitcher.svelte2.3 kB

src/routes/sidebar-03-demo/+page.svelte1 kB

Raw manifest:https://uipkge.dev/r/svelte/sidebar-03.json

Change language