SiteFooter
A comprehensive footer component with link columns, social icons, and legal links.
Loading...
Installation
pnpm add @corew500/uiUsage
import { SiteFooter } from "@corew500/ui/site-footer"
<SiteFooter
logo={<Logo />}
tagline="Build better products faster"
copyright="© 2024 Acme Inc. All rights reserved."
/>With Link Columns
Organize links into columns.
const columns = [
{
title: "Product",
links: [
{ label: "Features", href: "/features" },
{ label: "Pricing", href: "/pricing" },
{ label: "API", href: "/api" },
],
},
{
title: "Company",
links: [
{ label: "About", href: "/about" },
{ label: "Blog", href: "/blog" },
{ label: "Careers", href: "/careers" },
],
},
{
title: "Support",
links: [
{ label: "Help Center", href: "/help" },
{ label: "Contact", href: "/contact" },
{ label: "Status", href: "/status" },
],
},
]
<SiteFooter logo={<Logo />} columns={columns} />Social Links
Add social media icons with automatic icon selection.
const socialLinks = [
{ platform: "twitter", href: "https://twitter.com/acme" },
{ platform: "github", href: "https://github.com/acme" },
{ platform: "linkedin", href: "https://linkedin.com/company/acme" },
]
<SiteFooter
logo={<Logo />}
socialLinks={socialLinks}
tagline="Connect with us"
/>Supported platforms: twitter, github, linkedin, instagram, facebook
Legal Links
Add privacy policy, terms, and other legal links.
const legalLinks = [
{ label: "Privacy", href: "/privacy" },
{ label: "Terms", href: "/terms" },
{ label: "Cookies", href: "/cookies" },
]
<SiteFooter
logo={<Logo />}
legalLinks={legalLinks}
copyright="© 2024 Acme Inc."
/>Variants
{/* Default: Standard background */}
<SiteFooter variant="default" />
{/* Muted: Subtle background */}
<SiteFooter variant="muted" />
{/* Primary: Branded background */}
<SiteFooter variant="primary" />With Next.js Link
Use Next.js Link component for navigation.
import Link from "next/link"
<SiteFooter
logo={<Logo />}
columns={columns}
linkComponent={Link}
/>Complete Example
import { SiteFooter } from "@corew500/ui/site-footer"
import Link from "next/link"
const columns = [
{
title: "Product",
links: [
{ label: "Features", href: "/features" },
{ label: "Pricing", href: "/pricing" },
{ label: "Documentation", href: "/docs" },
{ label: "API Reference", href: "/api" },
],
},
{
title: "Company",
links: [
{ label: "About Us", href: "/about" },
{ label: "Blog", href: "/blog" },
{ label: "Careers", href: "/careers" },
{ label: "Press Kit", href: "/press" },
],
},
{
title: "Resources",
links: [
{ label: "Community", href: "/community" },
{ label: "Help Center", href: "/help" },
{ label: "Contact", href: "/contact" },
{ label: "Status", href: "/status" },
],
},
]
const socialLinks = [
{ platform: "twitter", href: "https://twitter.com/acme" },
{ platform: "github", href: "https://github.com/acme" },
{ platform: "linkedin", href: "https://linkedin.com/company/acme" },
]
const legalLinks = [
{ label: "Privacy Policy", href: "/privacy" },
{ label: "Terms of Service", href: "/terms" },
{ label: "Cookie Policy", href: "/cookies" },
]
export function Footer() {
return (
<SiteFooter
logo={<Logo />}
tagline="Build better products faster with our design system"
columns={columns}
socialLinks={socialLinks}
legalLinks={legalLinks}
copyright="© 2024 Acme Inc. All rights reserved."
linkComponent={Link}
/>
)
}API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | enum | — | Logo element or component |
| tagline | string | — | Tagline or description text |
| columns | FooterColumn[] | [] | Link columns |
| socialLinks | SocialLink[] | [] | Social media links |
| copyright | enum | — | Copyright text or element |
| legalLinks | FooterLink[] | [] | Legal/policy links |
| linkComponent | enum | a | Link component to use for navigation (defaults to anchor) |
| variant | enum | default | — |
Accessibility
Keyboard Navigation
- Links are keyboard accessible
Screen Readers
- Social icons have aria-label with platform name
- Icons use aria-hidden="true" as they're decorative
Additional
- - Uses semantic <footer> element
- Proper heading hierarchy (h3 for column titles)
Localization
Translatable Content
- - All text content flows through props
- Column titles, link labels, tagline, copyright should be pre-translated
- Social link labels can be customized for translation