Skip to main content

DashboardLayout

DashboardLayout

Complete dashboard layout with responsive sidebar and header

Tags: component layout dashboard

View Demo

DashboardLayout provides a complete dashboard interface with a responsive sidebar, header, and main content area. It handles mobile/desktop transitions automatically.

Import​

<script>
  import { DashboardLayout } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<script>
  const navigation = [
    {
      id: 'main',
      title: 'Main',
      items: [
        { id: 'dashboard', name: 'Dashboard', href: '/dashboard', icon: 'home' },
        { id: 'projects', name: 'Projects', href: '/projects', icon: 'folder' },
      ],
    },
  ];
</script>

<DashboardLayout {navigation}>
  <h1>Dashboard Content</h1>
</DashboardLayout>

Props​

Prop Type Default Description
navigation NavSection[] required Navigation sections for sidebar
user User - Current user data
appName string 'Dashboard' Application name
pageTitle string - Page title in header
backLink BackLink - Back link at top of navigation
sidebarVariant 'light' | 'dark' 'light' Sidebar visual variant
sidebarCollapsed boolean false Initial collapsed state
showHeader boolean true Whether to show header
logo Snippet - Custom logo
icon Snippet<[NavItem]> - Custom icon renderer
quickLinks QuickLink[] - Quick links at bottom
quickLinksDisplay 'list' | 'icons' 'list' Quick links display mode
onNavigate (item: NavItem) => void - Navigation callback
headerStart Snippet - Content after toggle button
headerEnd Snippet - Content at end of header
userMenu Snippet<[User]> - Custom user menu
sidebarFooter Snippet - Sidebar footer content
sidebarAutoCollapse boolean false Accordion sidebar navigation
footer Snippet - Page footer below main content
expandedWidth number 256 Expanded sidebar width (px)
collapsedWidth number 64 Collapsed sidebar width (px)
searchable boolean false Enable navigation search
searchPlaceholder string 'Search...' Search input placeholder
headerSearch HeaderSearchConfig - Header search configuration
mobileBreakpoint 'sm' | 'md' | 'lg' 'lg' Mobile/desktop breakpoint
children Snippet required Main content
quickLinkIcon Snippet<[QuickLink]> - Custom icon renderer for quick links
enablePinning boolean false Enable pinning feature for navigation items
pinnedSectionTitle string 'Pinned' Title for the pinned items section (default: "Pinned")
initialPinnedItems string[] - Initial pinned item IDs for server hydration
onPinnedChange (pinnedIds: string[]) => void - Callback when pinned items change (for external persistence)
pinIcon Snippet<[{ isPinned: boolean }]> - Custom pin icon renderer
contentPadding 'default' | 'compact' | 'none' 'default' Content area padding: 'default' (p-4 lg:p-6), 'compact' (p-2 lg:p-4), 'none' (no padding)
appId string - App identifier for per-app sidebar preferences storage
showToastContainer boolean true Render the AppShell's built-in ToastContainer (disable when the app mounts its own)

Types​

interface NavSection {
  id: string;
  title?: string;
  items: NavItem[];
  collapsible?: boolean;
  expanded?: boolean;
}

interface NavItem {
  id: string;
  name: string;
  href?: string;
  icon?: string;
  active?: boolean;
  children?: NavItem[];
  roles?: string[];
}

interface User {
  name: string;
  email?: string;
  initials?: string;
  avatar?: string;
  roles?: string[];
}

interface BackLink {
  label: string;
  href: string;
  icon?: string;
}

Build hierarchical navigation with sections and items:

<script>
  const navigation = [
    {
      id: 'overview',
      title: 'Overview',
      items: [
        { id: 'home', name: 'Home', href: '/', icon: 'home', active: true },
        { id: 'analytics', name: 'Analytics', href: '/analytics', icon: 'chart' },
      ],
    },
    {
      id: 'management',
      title: 'Management',
      collapsible: true,
      items: [
        { id: 'users', name: 'Users', href: '/users', icon: 'users' },
        { id: 'settings', name: 'Settings', href: '/settings', icon: 'settings' },
      ],
    },
  ];
</script>

<DashboardLayout {navigation}>
  <slot />
</DashboardLayout>

User Display​

Show current user information with optional custom menu:

<script>
  const user = {
    name: 'John Doe',
    email: 'john@example.com',
    initials: 'JD',
  };
</script>

<DashboardLayout {navigation} {user}>
  <slot />
</DashboardLayout>

Custom User Menu​

<DashboardLayout {navigation} {user}>
  {#snippet userMenu(user)}
    <DropdownMenu>
      <DropdownMenu.Trigger>
        <Avatar>{user.initials}</Avatar>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item href="/profile">Profile</DropdownMenu.Item>
        <DropdownMenu.Item href="/settings">Settings</DropdownMenu.Item>
        <DropdownMenu.Separator />
        <DropdownMenu.Item onclick={logout}>Log out</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu>
  {/snippet}

  <slot />
</DashboardLayout>

Dark Sidebar​

<DashboardLayout {navigation} sidebarVariant="dark">
  <slot />
</DashboardLayout>

Add a back link for sub-pages:

<DashboardLayout {navigation} backLink={{ label: 'Back to Projects', href: '/projects' }}>
  <h1>Project Details</h1>
</DashboardLayout>

Searchable Navigation​

<DashboardLayout {navigation} searchable searchPlaceholder="Search navigation...">
  <slot />
</DashboardLayout>

Custom Icons​

Provide custom icon rendering:

<DashboardLayout {navigation}>
  {#snippet icon(item)}
    <Icon name={item.icon} class="h-5 w-5" />
  {/snippet}

  <slot />
</DashboardLayout>

Add quick access links at sidebar bottom:

<script>
  const quickLinks = [
    { id: 'docs', name: 'Documentation', href: '/docs', icon: 'book' },
    { id: 'support', name: 'Support', href: '/support', icon: 'help' },
  ];
</script>

<DashboardLayout {navigation} {quickLinks}>
  <slot />
</DashboardLayout>

Keyboard Shortcuts​

DashboardLayout includes built-in keyboard shortcuts:

  • Ctrl+\ / Cmd+\ - Toggle sidebar
  • / - Focus navigation search (when not in input)

Responsive Behavior​

  • Desktop: Collapsible sidebar with icons-only mode
  • Mobile: Slide-out drawer with overlay
  • Automatic breakpoint detection
  • Persisted sidebar state across sessions

Accessibility​

  • Skip link for main content
  • Keyboard navigation through sidebar
  • Focus management for mobile drawer
  • ARIA labels and landmarks
  • Swipe-to-dismiss on mobile
  • Sidebar - Standalone sidebar component
  • Header - Standalone header component
  • AppShell - Base layout wrapper
On this page