Skip to main content

Footer

Footer

Site footer with link sections and branding

Tags: component layout navigation

View Demo

Footer provides a site-wide footer with organized link sections, logo, and copyright information.

Import​

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

Basic Usage​

<Footer />

Props​

Prop Type Default Description
links NavSection[] [] Link sections
copyright string Auto-generated Copyright text
showLogo boolean true Show logo
strongBorder boolean false 10px accent border
variant 'default' | 'dark' 'default' Visual variant
children Snippet - Custom content
class string - Additional classes

Organize footer links into columns:

<script>
  const links = [
    {
      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: 'blog', name: 'Blog', href: '/blog' },
        { id: 'careers', name: 'Careers', href: '/careers' },
      ],
    },
    {
      id: 'resources',
      title: 'Resources',
      items: [
        { id: 'docs', name: 'Documentation', href: '/docs' },
        { id: 'guides', name: 'Guides', href: '/guides' },
        { id: 'api', name: 'API Reference', href: '/api' },
      ],
    },
    {
      id: 'legal',
      title: 'Legal',
      items: [
        { id: 'privacy', name: 'Privacy Policy', href: '/privacy' },
        { id: 'terms', name: 'Terms of Service', href: '/terms' },
        { id: 'cookies', name: 'Cookie Policy', href: '/cookies' },
      ],
    },
  ];
</script>

<Footer {links} />

Mark external links:

<script>
  const links = [
    {
      id: 'social',
      title: 'Social',
      items: [
        { id: 'twitter', name: 'Twitter', href: 'https://twitter.com/example', external: true },
        { id: 'github', name: 'GitHub', href: 'https://github.com/example', external: true },
        { id: 'discord', name: 'Discord', href: 'https://discord.gg/example', external: true },
      ],
    },
  ];
</script>

<Footer {links} />
<Footer {links} copyright="2024 Your Company, Inc. All rights reserved." />

Dark Variant​

Branded dark footer:

<Footer {links} variant="dark" />

Strong Border​

Add a bold accent border:

<Footer {links} strongBorder />

Combined Styling​

<Footer {links} variant="dark" strongBorder />
<Footer {links} showLogo={false} />

Custom Content​

Add custom content above the copyright:

<Footer {links}>
  <div class="flex justify-center gap-6">
    <a href="https://twitter.com" aria-label="Twitter">
      <TwitterIcon class="h-6 w-6" />
    </a>
    <a href="https://github.com" aria-label="GitHub">
      <GitHubIcon class="h-6 w-6" />
    </a>
    <a href="https://linkedin.com" aria-label="LinkedIn">
      <LinkedInIcon class="h-6 w-6" />
    </a>
  </div>
</Footer>

Examples​

<script>
  const links = [
    {
      id: 'product',
      title: 'Product',
      items: [
        { id: 'features', name: 'Features', href: '/features' },
        { id: 'pricing', name: 'Pricing', href: '/pricing' },
        { id: 'integrations', name: 'Integrations', href: '/integrations' },
        { id: 'changelog', name: 'Changelog', href: '/changelog' },
      ],
    },
    {
      id: 'company',
      title: 'Company',
      items: [
        { id: 'about', name: 'About Us', href: '/about' },
        { id: 'blog', name: 'Blog', href: '/blog' },
        { id: 'careers', name: 'Careers', href: '/careers' },
        { id: 'press', name: 'Press Kit', href: '/press' },
      ],
    },
    {
      id: 'support',
      title: 'Support',
      items: [
        { id: 'help', name: 'Help Center', href: '/help' },
        { id: 'contact', name: 'Contact Us', href: '/contact' },
        { id: 'status', name: 'System Status', href: 'https://status.example.com', external: true },
      ],
    },
    {
      id: 'legal',
      title: 'Legal',
      items: [
        { id: 'privacy', name: 'Privacy', href: '/privacy' },
        { id: 'terms', name: 'Terms', href: '/terms' },
        { id: 'security', name: 'Security', href: '/security' },
      ],
    },
  ];
</script>

<Footer {links} copyright="2024 Example Inc. All rights reserved." />
<Footer copyright="2024 Company Name" showLogo={false} />
<Footer
  {links}
  variant="dark"
  strongBorder
  copyright="2024 Classic Homes. Building quality since 1985."
>
  <div class="grid grid-cols-3 gap-4 text-center">
    <div>
      <p class="text-2xl font-bold">500+</p>
      <p class="text-sm text-gray-400">Homes Built</p>
    </div>
    <div>
      <p class="text-2xl font-bold">25+</p>
      <p class="text-sm text-gray-400">Years Experience</p>
    </div>
    <div>
      <p class="text-2xl font-bold">98%</p>
      <p class="text-sm text-gray-400">Satisfaction</p>
    </div>
  </div>
</Footer>

Layout​

  • Links display in a 4-column grid on desktop
  • Responsive: 2 columns on mobile, 3 on tablet
  • Logo and copyright at bottom
  • Custom content appears between links and copyright

Accessibility​

  • Semantic footer landmark
  • Navigation labels for screen readers
  • External link indicators
  • Screen reader text for external links
On this page