Website footers

Mega footers, minimal bars, newsletter and sitemap columns.

The footer is where the rest of your site becomes reachable — it is usually the only place every page links to every section, which is what lets a crawler and a lost visitor find the long tail. The mega variants take four to six columns; the minimal one is for apps, where a fat footer under a dashboard is dead weight.

19 matching9 blocks1 template4 pages5 effectsFree to copy
Open the full page for this block

Mega Footer with Link Columns

Brand column, four labelled nav columns, socials and a legal bar — the one place every page links to every section. Ships no client JavaScript.

Footers265 lines1 dep
Open the full page for this block

Footer with Newsletter Band

A raised email-capture band overlapping a three-column link footer, with the confirmation replacing the field in place rather than navigating away.

Footers260 lines1 dep
Open the full page for this block

Regulated Seller Footer

Legal entity, company number, registered address, VAT and the consumer links an EU or UK seller has to publish — with a region control that changes the terms, not just the currency.

Footers287 lines1 dep

Community Link Band

A closing CTA of three link cards pointing at GitHub, chat and social — somewhere to go for the visitor who is not ready to convert.

CTA Sections100 lines1 dep
Open the full page for this block

Slide-Over Edit Panel

A side sheet for editing a record without losing the list behind it — native <dialog> for the trapping, a data attribute for the slide, and a sticky footer so Save never scrolls away.

Modals & Drawers208 lines1 dep
Open the full page for this block

Bordered Logo Grid

Hairline-separated cells that hold still and show the whole set at once — the logo wall for a footer, a customers page, or anywhere the count is the claim.

Logo Clouds89 linesNo deps
Open the full page for this block

Knowledge Source Picker

Choosing what the assistant may read, with indexing state told honestly — a half-indexed source says so rather than showing a green tick — and the footer stating the effect of the selection, not its cardinality.

Retrieval & Context345 lines1 dep

Templates1

See all →
Pro
Open the full page for this template

Local Service

Hours, address and phone above the fold

Deep teal, for a business people let into their house. A booking widget above the fold, every price published, and a compliance footer with the registrations a regulated trade has to show.

4 routes4 pages14 blocksHarbour
Open the full page for this page

SaaS Landing Page

A complete marketing page in the order that actually converts — hook, proof, substance, price, objections, exit. Twelve blocks, navbar and footer included.

Marketing Pages12 blocks89 lines
Open the full page for this page

Local Service Landing Page

A booking widget above the fold, every price published including the awkward ones, and a footer carrying the registrations a regulated trade must show.

Marketing Pages9 blocks353 lines

Blog Index

The post grid, a subscribe ask that comes after the proof, and a minimal footer — no hero, because the featured post already is one.

Marketing Pages4 blocks39 lines
Open the full page for this page

404 Page

Drops straight into app/not-found.tsx, and keeps the site header and footer — on a 404 the navigation is the most useful thing on screen.

System Pages1 blocks62 lines

Effects5

See all →

Three-column link map under a gradient border-image rule, each link underlining from its leading edge so the columns stay quiet until something is pointed at.

Scrollable line-item list whose total row stays pinned to the bottom edge while the items scroll beneath it.

Service card that keeps its action row rolled away until hover, when the footer unrolls to reveal three controls.

Invoice rows closed off by a footer that states the visible range and offers numbered pagination with the current page filled.

Slide panel headed by a large position counter, with a thin fill bar and paired arrows sharing the footer.

Questions about website footers

What has to be in a footer legally?
It varies, but the practical set is a link to your terms, your privacy policy, a way to contact you, and — if you sell in the EU — your company identity. A cookie or consent link belongs there too if you set anything beyond strictly necessary.
How many links is too many?
Past about forty, the footer stops being navigation and becomes a sitemap, which is fine if it is grouped under real headings. Ungrouped, it dilutes the internal links that matter.
Are these website footers free to use?
18 of the 19 are free to copy and use commercially; 1 need a Pro licence, and each one says so on its own page before you spend any time on it.
How do I add one to my project?
Install it with the CLI: `npx hoverlab add footer-mega` writes the component and its dependencies into your project. Every artifact here also has a copy button for the raw source, and an "Open in sandbox" link if you would rather try it first.
Why does this page mix components and whole pages?
Because the phrase does. The same search covers 5 CSS effects, 9 section blocks, 4 composed pages and 1 template — one of them is the right size for what you are building, and which one depends on how much of the screen you still have to write.