build69
build69  /  Components  /  Marketing Sections  /  Footer

Footer

v1.0.18Updated 19 Oct 2026

Site footer with link columns, newsletter, legal row and social icons. Copy-paste block; baked-in demo content (edit the JSX to customise).

View source← Back to catalog

Preview

Live · 13 stories
Multi ColumnOpen ↗
▸Why this is recommendedfooterlinkssitemaplegal+4

Footer handling multiple items at once — column.

Recommended for+14
  • ✓Landing pages
  • ✓Marketing pages
  • ✓Any public website
  • ✓a real public site footer whose link columns, legal row and social links are passed in as data
  • ✓a footer that shows our own logo image instead of a monogram tile
  • ✓a site footer with logo, tagline, three link columns and a copyright and credit row
Tags+6
footerlinkssitemaplegalmarketingsectionmulticolumn
Features+4
  • Multi-column, minimal, with-newsletter and dark layouts
  • Link columns + social MEDIA profile icons (Facebook, LINE, X) + copyright row — these are links OUT to your accounts, not social SIGN-IN buttons, which are Login providers
  • Configured entirely by props, never by editing the vendored file: `columns` is the sitemap (each column becomes a labelled nav landmark), `legalLinks` the bottom row, `social` the icon row, `brand` your own logo node in place of the monogram lockup, `storeLinks` / `lineHref` the app-store and LINE OA destinations. `links` is the flat row the single-line layouts use and defaults to the columns flattened, so one configuration drives whichever layout you pick
  • Destinations have NO default: with nothing passed a footer renders its brand, tagline and copyright and omits the blocks it has no data for, rather than showing a demo sitemap of href="#" rows. Strings keep their byte-identical English defaults; only links start empty. A badge or button with no destination renders inert instead of as a dead link. Requested by condo69 as fb_bc8045e2 / fb_f8fba1de
  • Client-side routing: pass `linkComponent` (next/link, React Router Link) and every row that has an href renders through the host app link component instead of a plain anchor, which would reload the whole document (fb_bf7dc63a) — across the link columns, the legal row, the social icons and the app-store badges of every layout
  • i18n: labels prop overrides every built-in display string (brand, taglines, copyright, newsletter and legal copy); merged over DEFAULT_FOOTER_LABELS. Link text is caller data and travels with `columns` / `legalLinks`, not through labels
Not recommended for−2
  • ✕In-app shells (use the app footer slot)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Footer" })

Usage

import { FooterMultiColumn } from '@/components/sections/footer';

<FooterMultiColumn
  linkComponent={Link}
  brand={<img src="/logo.svg" alt="Condo69" height={32} />}
  columns={[
    { title: 'Find a home', links: [{ label: 'Condos for rent', href: '/rent' }] },
    { title: 'Owners', links: [{ label: 'List for free', href: '/list' }] },
  ]}
  legalLinks={[{ label: 'Privacy', href: '/legal/privacy' }]}
  social={[{ label: 'LINE', href: 'https://line.me/R/ti/p/@condo69' }]}
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
className

Optional wrapper class override

string—
columns

The site sitemap: [{ title, links: [{ label, href }] }]. Each column renders as a nav landmark named by its title. Defaults to [] — no columns rather than a demo sitemap, so a vendored copy cannot ship our links (fb_bc8045e2). Used by every multi-column layout; the lg grid track count follows the array length.

FooterColumn[]—
links

The flat link row used by FooterMinimal and FooterCentered. Defaults to columns.flatMap(c => c.links), so configuring `columns` alone is enough whichever layout you pick.

FooterLink[]—
legalLinks

The bottom legal row (privacy, terms, sitemap, PDPA). Defaults to [] — a legal link that goes nowhere is worse than no legal link.

FooterLink[]—
social

[{ label, href, brand?, icon? }] — `label` is the accessible name, `brand` picks a built-in mark by key (github, linear, notion, figma…), `icon` supplies your own node and wins. Defaults to [] and the whole row is omitted, so no footer shows icons for accounts you do not have.

FooterSocialLink[]—
brand

Your own logo in place of the built-in monogram + wordmark lockup, e.g. brand={<img src="/logo.svg" alt="Condo69" />}. Omit it and the lockup renders from labels.brandMonogram / labels.brandWordmark exactly as before.

ReactNode—
storeLinks

App-store destinations for FooterAppDownload. A badge with no href renders as a plain, non-interactive badge rather than a dead link.

{ appStore?: string; googlePlay?: string }—
lineHref

Destination for the FooterTwoTone LINE OA button. Without it the button is not rendered at all.

string—
labels

Override every built-in display string (brand name, taglines, copyright, newsletter and legal copy) for i18n or white-labelling. Merged over DEFAULT_FOOTER_LABELS.

Partial<FooterLabels>—
linkComponent

The host app link component for EVERY anchor the footer renders — link columns, legal row, social icons and store badges (next/link, React Router Link). Defaults to a plain anchor, which in a routed app reloads the whole document. MCP feedback fb_bf7dc63a.

FooterLinkComponent—

Related

Platform docsAll componentsSource files