Floating Inset Sidebar

blocklayout

Floating sidebar variant with rounded corners and inset margins. Uses Sidebar variant="floating" and SidebarMenuSub for nested routes. Sample data inlined so consumers edit routes in place.

Installation

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

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

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

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

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

Variants

Loading interactive previews…

Includes

sidebar

Files installed (2)

src/lib/components/blocks/sidebar-04/Sidebar04.svelte5.3 kB

<script lang="ts">
  import {
    Sidebar,
    SidebarContent,
    SidebarGroup,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarMenuSub,
    SidebarMenuSubButton,
    SidebarMenuSubItem,
  } from '$lib/components/ui/sidebar'

  // This is sample data.
  const data: {
    navMain: {
      title: string
      url: string
      isActive?: boolean
      items?: { title: string; url: string; isActive?: boolean }[]
    }[]
  } = {
    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-04" variant="floating">
  <SidebarHeader>
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton size="lg">
          {#snippet child({ props })}
            <a href="#" {...props}>
              <div
                class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
              >
                <svg viewBox="0 0 24 24" class="size-4" fill="currentColor" aria-hidden="true">
                  <rect x="2" y="2" width="9" height="9" rx="1.5" />
                  <rect x="13" y="2" width="9" height="9" rx="1.5" opacity="0.55" />
                  <rect x="2" y="13" width="9" height="9" rx="1.5" opacity="0.55" />
                  <rect x="13" y="13" width="9" height="9" rx="1.5" />
                </svg>
              </div>
              <div class="flex flex-col gap-0.5 leading-none">
                <span class="font-medium">uipkge</span>
                <span class="">v1.0.0</span>
              </div>
            </a>
          {/snippet}
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarHeader>
  <SidebarContent>
    <SidebarGroup>
      <SidebarMenu class="gap-2">
        {#each data.navMain as item (item.title)}
          <SidebarMenuItem>
            <SidebarMenuButton isActive={item.isActive} class="font-medium">
              {#snippet child({ props })}
                <a href={item.url} {...props}>
                  {item.title}
                </a>
              {/snippet}
            </SidebarMenuButton>
            {#if item.items?.length}
              <SidebarMenuSub class="ml-0 border-l-0 px-1.5">
                {#each (item.items ?? []) as childItem (childItem.title)}
                  <SidebarMenuSubItem>
                    <SidebarMenuSubButton isActive={childItem.isActive}>
                      {#snippet child({ props })}
                        <a href={childItem.url} {...props}>{childItem.title}</a>
                      {/snippet}
                    </SidebarMenuSubButton>
                  </SidebarMenuSubItem>
                {/each}
              </SidebarMenuSub>
            {/if}
          </SidebarMenuItem>
        {/each}
      </SidebarMenu>
    </SidebarGroup>
  </SidebarContent>
</Sidebar>

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

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

Change language