Navigation

Site Footer

Brand block, grouped link columns as labelled navs, and a legal bar with copyright line.

Element: <footer>
Module: @basenative/components
Function: renderSiteFooter

Quick start

Import the render function and call it from your server template.

import { renderSiteFooter } from '@basenative/components';

renderSiteFooter({
  brand: { name: 'Acme', tagline: 'Tools for the trades.' },
  columns: [{ heading: 'Product', links: [{ label: 'Features', href: '#features' }] }],
  legal: { text: '© 2026 Acme', links: [{ label: 'Privacy', href: '#privacy' }] },
});

Examples

Each block is a real server render — no mockups, no virtual DOM.

Brand, columns and legal bar

Each column is a labelled nav with an h2 heading; external links get rel="noopener noreferrer".

Live render

Source

renderSiteFooter({
  brand: { name: 'Acme', tagline: 'Tools for the trades.' },
  columns: [
    { heading: 'Product', links: [{ label: 'Features', href: '#features' }, { label: 'Pricing', href: '#pricing' }] },
    { heading: 'Company', links: [{ label: 'About', href: '#about' }, { label: 'GitHub', href: 'https://example.com', external: true }] },
  ],
  legal: { text: '© 2026 Acme. All rights reserved.', links: [{ label: 'Privacy', href: '#privacy' }, { label: 'Terms', href: '#terms' }] },
})

Options

Arguments accepted by renderSiteFooter().

renderSiteFooter option reference
Option	Type	Default	Description
`brand`	`{ name?, logo?, tagline? }`	`{}`	Brand name, logo mark (HTML slot) and tagline.
`columns`	`{ heading, label?, links }[]`	`[]`	Link columns; each renders as a nav with an h2 heading.
`legal`	`{ text?, links? }`	`—`	Copyright line and legal links for the bottom bar.