Footer
A responsive footer component that displays brand identity, organized link groups, social media icons, and an optional copyright notice. It supports light and dark visual variants and adapts its grid layout from mobile to desktop.
Footer
A responsive footer component that displays brand identity, organized link groups, social media icons, and an optional copyright notice. It supports light and dark visual variants and adapts its grid layout from mobile to desktop.
Use Cases
- Site-wide footer with company links and social media
- Multi-column footer with grouped navigation links (Company, Product, Resources, Legal)
- Minimal footer with brand and social links only
- Footer with comprehensive link directory for large sites
- Landing page footer with brand identity and copyright
Properties
brandText
Brand/company name displayed in the footer brand section (also used in the copyright notice if showCopyright=true). Type: string. Tip: Use the same brandText as the Navbar for consistency. When showCopyright=true, the notice appears as “© 2024 <brandText>. All rights reserved.”
brandIcon
Lucide icon name for the brand logo. The icon is rendered in a 40 px gradient circle (indigo to violet) with a shadow, appearing above or beside brandText. Type: string. Visual Impact: Icon displayed in a 40 px gradient circle with shadow. Tip: Use the same brandIcon as the Navbar for visual consistency and include both brandIcon and brandText for a professional appearance. Security Note: Only Lucide icon names are accepted; invalid names are ignored.
tagline
Brand tagline or description (1–2 sentences) displayed below the brand in the footer. Type: string. Tip: Keep the length to 1–2 sentences (≈80 characters), convey the core value or mission, and match the brand’s tone.
linkGroups
Grouped navigation links organized by category (e.g., Company, Product, Legal). Each group is rendered as a column in the footer grid. Type: array. Tip: Use 2–4 groups, each with 4–6 links, and group related links together for user convenience.
socialLinks
Social media platform links with icons, rendered as icon buttons below the brand section. Type: array. Tip: Include only platforms where the brand is actively present, limit to 3–5 icons, and provide a custom aria label for accessibility.
showCopyright
Whether to display a copyright notice with the current year and brand name. Type: boolean. Default: true. Visual Impact (true): Displays “©
variant
Visual style variant controlling footer background and text colors. Type: string. Options: light, dark. Default: dark. Visual Impact (light): Light gray background (#f3f4f6) with dark gray text (#111827); suitable when the page has a dark background. Visual Impact (dark): Dark gray background (#111827) with white text and dark borders; the standard appearance. Tip: Use “dark” for most footers; use “light” when the page background is dark to maintain contrast.
customCss
Custom CSS styles for advanced styling. Parsed as CSS property‑value pairs. Type: string. Tip: Provide CSS declarations such as “background-color: #1e293b; padding-top: 64px;”. Security Note: CSS is parsed by a safe utility and isolated per tenant.
Best Practices
- ALWAYS include Footer on multi-page apps for consistent site-wide navigation
- Use 2‑4 link groups for organized navigation (Company, Product, Resources, Legal)
- Include social media links for brands with social presence (Twitter, LinkedIn, Facebook, etc.)
- Set showCopyright=true to include automatic copyright year and brand name
- Use variant='dark' for most footers (common web convention)
- Use variant='light' when page has dark background or for unique design needs
- Keep link group titles short (1 word: 'Company', 'Product', 'Legal')
- Limit each link group to 4‑6 links for readability
- Include tagline for brand messaging (1‑2 sentences about company/product)
Common Mistakes
Not including Footer on multi-page apps
Why it's a problem: Footer provides important secondary navigation, legal links (Privacy, Terms), and social presence. Missing footer looks unfinished.
Fix: Always add Footer component to establish site-wide navigation and professional appearance
Creating too many link groups (5+) causing footer clutter
Why it's a problem: Too many columns make footer overwhelming and hard to navigate. Mobile layout breaks with too many groups.
Fix: Use 2‑4 link groups. Consolidate similar links (e.g., combine ‘Support’ and ‘Resources’ into one group)
Adding social links for inactive platforms
Why it's a problem: Dead social media profiles make brand look abandoned or unprofessional. Users expect activity.
Fix: Only include social platforms where brand is actively posting and engaging
Using variant='light' when page has light/white background
Why it's a problem: Light footer on light page has poor contrast, hard to read.
Fix: Use variant='dark' for standard light‑colored pages (dark footer is web convention)
Not setting showCopyright=true
Why it's a problem: Copyright notice is professional standard and provides legal protection. Missing copyright looks unprofessional.
Fix: Set showCopyright=true for professional sites. Footer automatically displays “©
Inconsistent branding between Navbar and Footer
Why it's a problem: Different brandText or brandIcon in Navbar vs Footer confuses users and looks unprofessional.
Fix: Use identical brandText and brandIcon in both Navbar and Footer for consistency
Too many links per group (10+) making columns too long
Why it's a problem: Long columns push content down, make footer overwhelming. Users don’t read long lists.
Fix: Limit each link group to 4‑6 most important links. Move less important links elsewhere or remove
🚨 CRITICAL: Creating footer links with targetPage values but NOT creating the corresponding pages
Why it's a problem: Broken links destroy user experience and make the app look unfinished. If footer links to ‘about’, ‘privacy’, ‘terms’ but these pages don’t exist, users get 404 errors or blank pages.
Fix: FOR EVERY targetPage slug in footer links, CREATE the corresponding page with actual content, Navbar, and Footer. Footer has 5 links? Create 5 pages. Footer has 10 links? Create 10 pages. NO EXCEPTIONS.