Footer
Navigation
Block
Layout
A versatile footer block with multiple variants for different use cases. Includes navigation sections, social links, and branding.
Default Footer
Full-featured footer with navigation sections and social links
Minimal Footer
Simple footer with brand, copyright, and social links
Centered Footer
Centered layout with flattened navigation links
Custom Navigation
Footer with custom navigation sections
Usage
How to implement the Footer block
import { Footer } from '@/blocks/navigation/footer'
// Default footer with all sections<Footer socialLinks={{ github: 'https://github.com/yourorg', twitter: 'https://twitter.com/yourorg', linkedin: 'https://linkedin.com/company/yourorg', email: 'hello@yourcompany.com', }}/>
// Minimal footer<Footer variant="minimal" />
// Centered footer<Footer variant="centered" />
// Custom branding and sections<Footer brandName="MyApp" brandDescription="Your SaaS tagline here." sections={[ { title: 'Product', links: [ { label: 'Features', href: '/features' }, { label: 'Pricing', href: '/pricing' }, ], }, { title: 'Support', links: [ { label: 'Help', href: '/help' }, { label: 'API Docs', href: 'https://api.example.com', external: true }, ], }, ]} copyrightHolder="MyApp Inc." showBuiltWith={false}/>Props
Footer component props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "minimal" | "centered" | "default" | Footer layout variant |
brandName | string | "Eidetic" | Brand/company name |
brandDescription | string | — | Short brand description text |
logo | React.ReactNode | — | Custom logo component |
sections | FooterSection[] | — | Navigation sections with links |
socialLinks | { github?, twitter?, linkedin?, email? } | — | Social media URLs |
copyrightHolder | string | "Eidetic" | Name for copyright notice |
showBuiltWith | boolean | true | Show "Built with Eidetic" text |
className | string | — | Additional CSS classes |
FooterSection Type
Structure for navigation sections
interface FooterSection { title: string links: FooterLink[]}
interface FooterLink { label: string href: string external?: boolean // Opens in new tab with icon}Features
Footer block capabilities
- Multiple variants: Default, minimal, and centered layouts
- Navigation sections: Organized link groups with headings
- Social links: GitHub, Twitter, LinkedIn, and email icons
- External link handling: Auto-detects and marks external links
- Custom branding: Custom logo, name, and description
- Dark mode: Full dark mode support
- Responsive: Adapts from mobile to desktop
- Accessible: Proper ARIA labels for social links