Footer Columns
block / marketing
Site footer with a nav landmark per column, external and disabled link states, a legal row and slots for the logo and a signup form.
- type
- block
- files
- 2
- registry deps
- badge, @automindz/render-link
- npm deps
- lucide-react
installs
- lib/automindz/footer-nav.ts
- components/automindz/footer-columns.tsx
- One nav landmark per column, named by its label.
- A disabled link is text with a reason, not a dead anchor.
- No form here — the newsletter is a slot.
Columns are data: edit lib/automindz/footer-nav.ts or pass columns. A column with no links is dropped, not left as a gap. Each column is its own nav named by its label. A disabled link renders as text with its reason — never a dead anchor; an external link gets an icon, rel and "opens in a new tab", and skips renderLink because a router has no use off-site. newsletter is a slot: the footer refuses to own a form, that is @automindz/cta-band. Bring your own page container.
Variations
one state per section
- 01Four columns with brand
- 02Link states
- 03Fifteen links in one column
- 04No social, no brand
- 05Newsletter slot filled
Four columns with brand
The full shape: logo slot, description, four named nav landmarks, social row, and a legal row behind a one-pixel hairline. Collapses to two-up and then a single stack with the labels intact.
Link states
External carries an icon, rel and an accessible “opens in a new tab”. Badged links keep the badge inside the anchor as a span. Disabled links are text with the reason under them — never an anchor that goes nowhere.
Fifteen links in one column
A deep docs column next to a short one. Cells align to the top, so the tall column stretches the row rather than dragging its neighbour down or overflowing sideways.
No social, no brand
The common case. No social row, no logo slot, and an empty Partners column omitted entirely instead of leaving a hole in the grid.