Footer

Responsive footer component that displays brand identity, organized link groups, social media links, and a 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 footer brand section (also used in copyright notice if showCopyright=true). Type: string. Tip: Use same brandText as Navbar for consistency. When showCopyright=true, appears as “© 2024 <brandText>. All rights reserved.”

brandIcon

Lucide icon name for brand logo. Icon rendered in gradient circle (indigo to violet) with 40px size, matching Navbar style. Type: string. Visual Impact: Icon displayed in 40px gradient circle (indigo‑violet) with shadow. Appears above/beside brandText in footer brand section. Tip: Use same brandIcon as Navbar for visual consistency. Include both brandIcon and brandText for professional appearance. Security Note: Only Lucide icon names are accepted (invalid names are ignored).

tagline

Brand tagline or description (1-2 sentences) displayed below brand in footer. Type: string. Tip: 1-2 sentences (80 characters max). Communicate core value or mission. Match brand voice (professional, friendly, technical, etc.).

linkGroups

Grouped navigation links organized by category (e.g., Company, Product, Legal). Each group rendered as a column in footer grid. Type: array. Minimum items: 0. Maximum items: 6. Tip: 2-4 groups for balanced footer layout. 4-6 links per group for readability. Common groups: Company (About, Careers, Contact), Product (Features, Pricing, FAQ), Legal (Privacy, Terms). Group related links together for user convenience.

socialLinks

Social media platform links with icons. Rendered as icon buttons below brand section. Type: array. Minimum items: 0. Maximum items: 10. Tip: Include platforms where brand is actually active. Common platforms: Twitter, LinkedIn for B2B; Instagram, Facebook for B2C; GitHub for tech products. Use 3-5 icons for a clean appearance. Set custom label for better screen reader support.

showCopyright

Whether to display copyright notice with current year and brand name. Type: boolean. Default: true. Visual Impact (true): Displays “© . All rights reserved.” in footer bottom section with top border separator. Visual Impact (false): No copyright notice displayed. Tip: Use true for professional sites (copyright notice is standard). Use false only for minimal/artistic designs where copyright isn’t needed.

variant

Visual style variant controlling footer background and text colors. Type: string. Options: light, dark. Default: dark. Visual Impact (light): Light gray background (#f3f4f6), dark gray text (#111827). Works when page has dark background. Visual Impact (dark): Dark gray background (#111827), white text, dark borders. Standard footer appearance (most common). Tip: Use ‘dark’ for most footers (industry convention). Use ‘light’ when page has dark background for contrast. Match variant to overall page theme.

customCss

Custom CSS styles for advanced styling. Parsed as CSS property‑value pairs. Type: string. Tip: Provide CSS like “background-color: #1e293b; padding-top: 64px;”. Security Note: Parsed by cssParser utility. Tenants only affect their own pages (multi‑tenant isolation enforced).

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 “© . All rights reserved.”

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.