Skip to main content

PublicLayout

PublicLayout

Layout for public-facing marketing and content pages

Tags: component layout marketing

View Demo

PublicLayout provides a clean layout for public-facing pages with header navigation and footer. Ideal for marketing sites, landing pages, and content pages.

Import​

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

Basic Usage​

<script>
  const navigation = [
    { id: 'home', name: 'Home', href: '/', active: true },
    { id: 'about', name: 'About', href: '/about' },
    { id: 'contact', name: 'Contact', href: '/contact' },
  ];
</script>

<PublicLayout {navigation}>
  <section class="py-20">
    <h1>Welcome</h1>
  </section>
</PublicLayout>

Props​

Prop Type Default Description
navigation NavItem[] [] Header navigation items
showFooter boolean true Whether to show footer
footerLinks NavSection[] [] Footer link sections
copyright string - Footer copyright text
logo Snippet - Custom logo
logoSubtitle string - Subtitle for default logo
logoEnvironment 'local' | 'dev' | 'demo' - Environment indicator
headerEnd Snippet - Content at end of header
strongFooterBorder boolean false Strong accent border on footer
darkFooter boolean false Dark footer variant
headerSearch HeaderSearchConfig - Header search config
children Snippet required Main content
mobileBreakpoint Breakpoint 'md' Breakpoint below which the header shows the hamburger drawer instead of the inline nav. Default md (768px). Pick lg when logo + nav + headerEnd need more than ~768px: at iPad portrait widths (820px) they otherwise overlap.
mobileNavStyle 'dropdown' | 'drawer' 'dropdown' How the hamburger opens the nav below mobileBreakpoint. dropdown (default) expands under the header bar, pushing the page down when the header is at the top. drawer slides the Sidebar in over the page with a scrim - the same drawer, focus trap, Escape and swipe-to-close as DashboardLayout apps.
mobileNavEnd Snippet<[{ close: () => void }]> - Content rendered at the bottom of the mobile drawer (e.g. a CTA button). When provided, headerEnd is hidden below the mobile breakpoint so a wide button no longer competes with the logo on phone widths. Receives close so the drawer can be dismissed after navigation.
logoHref string '/' URL for logo link (defaults to '/')

Navigation items appear as uppercase bold links in the header:

<script>
  const navigation = [
    { id: 'features', name: 'Features', href: '/features' },
    { id: 'pricing', name: 'Pricing', href: '/pricing' },
    { id: 'docs', name: 'Docs', href: '/docs' },
    { id: 'blog', name: 'Blog', href: '/blog', external: true },
  ];
</script>

<PublicLayout {navigation}>
  <slot />
</PublicLayout>

Add footer links organized by section:

<script>
  const footerLinks = [
    {
      id: 'product',
      title: 'Product',
      items: [
        { id: 'features', name: 'Features', href: '/features' },
        { id: 'pricing', name: 'Pricing', href: '/pricing' },
        { id: 'changelog', name: 'Changelog', href: '/changelog' },
      ],
    },
    {
      id: 'company',
      title: 'Company',
      items: [
        { id: 'about', name: 'About', href: '/about' },
        { id: 'careers', name: 'Careers', href: '/careers' },
        { id: 'contact', name: 'Contact', href: '/contact' },
      ],
    },
    {
      id: 'legal',
      title: 'Legal',
      items: [
        { id: 'privacy', name: 'Privacy', href: '/privacy' },
        { id: 'terms', name: 'Terms', href: '/terms' },
      ],
    },
  ];
</script>

<PublicLayout {navigation} {footerLinks} copyright="2024 Your Company. All rights reserved.">
  <slot />
</PublicLayout>
<PublicLayout {navigation}>
  {#snippet logo()}
    <img src="/logo.svg" alt="Company Logo" class="h-8" />
  {/snippet}

  <slot />
</PublicLayout>

With Logo Subtitle​

Use the default logo with a custom subtitle:

<PublicLayout {navigation} logoSubtitle="MY HOME" logoEnvironment="demo">
  <slot />
</PublicLayout>

Header Actions​

Add buttons or other content to header:

<PublicLayout {navigation}>
  {#snippet headerEnd()}
    <Button href="/login" variant="outline">Log In</Button>
    <Button href="/signup">Get Started</Button>
  {/snippet}

  <slot />
</PublicLayout>

Use a dark branded footer:

<PublicLayout {navigation} {footerLinks} darkFooter strongFooterBorder>
  <slot />
</PublicLayout>
<PublicLayout {navigation} showFooter={false}>
  <slot />
</PublicLayout>
<PublicLayout
  {navigation}
  headerSearch={{
    enabled: true,
    placeholder: 'Search...',
    onSearch: (query) => console.log(query),
  }}
>
  <slot />
</PublicLayout>

Responsive Behavior​

  • Desktop: Horizontal navigation with full links
  • Mobile: Hamburger menu with slide-down navigation
  • Backdrop blur effect on scroll
  • Elevated header with shadow

Examples​

Landing Page​

<PublicLayout {navigation} {footerLinks}>
  <section class="py-24 text-center">
    <h1 class="text-5xl font-bold">Build Better Products</h1>
    <p class="mt-4 text-xl text-muted-foreground">The modern way to build applications.</p>
    <div class="mt-8 flex justify-center gap-4">
      <Button size="lg">Get Started</Button>
      <Button size="lg" variant="outline">Learn More</Button>
    </div>
  </section>
</PublicLayout>

Documentation Site​

<PublicLayout
  {navigation}
  showFooter={false}
  headerSearch={{ enabled: true, placeholder: 'Search docs...' }}
>
  <div class="flex">
    <aside class="w-64">Sidebar</aside>
    <main class="flex-1">Documentation content</main>
  </div>
</PublicLayout>

Accessibility​

  • Semantic navigation landmarks
  • Mobile menu keyboard accessible
  • Active page indication
  • External link indicators
On this page