UI components · Navigation
Footer
Also called: Site footer, Page footer, Bottom bar
The area at the very bottom of a web page with copyright info, legal notices (like the ICP filing number on sites in China), common links, and contact details. It's usually the same on every page.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstAdd a footer at the bottom of the site with a dark gray background. The top half has four columns of links (Product, Resources, Company, Help), 4 links each. The bottom half is a line of small light text: "© 2025 Acme Inc." and Privacy and Terms links on the left, social icons on the right. When the content is shorter than the screen, keep the footer at the bottom of the window. On mobile, switch the links to two columns.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Footer is what you need.
Use Footer when
- Visitor-facing sites like company sites, blogs, and landing pages that need a consistent bottom area
- You need info that belongs on every page, like the copyright notice, privacy policy, or (in China) the ICP filing number
- You have lots of secondary links, like Help Center, Careers, and Contact us, that need one home
Pick something else when
Core feature links or main action buttons, since almost nobody sees them in the footer
The workspace of an admin system, where a big footer eats up working space
Feed pages with infinite scroll, where the footer can never be reached
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
When the content is shorter than the screen, the footer floats in the middle of the page with a big empty gap below it
- 02
Treating the button area at the bottom of a modal or card as a page-level footer, which muddles the structure
- 03
Dozens of footer links crammed together with no group headings
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
Several groups of links in columns, plus a bottom row with copyright and legal info. It can also have a logo, social icons, and a signup input.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
The footer sits at the very bottom of the page. A company site's footer usually has several columns of links (Product, Resources, Company, Help), and below that a row with the copyright notice, privacy policy, and, on sites hosted in mainland China, the ICP filing number (a government registration number those sites must display). Sometimes it also has social media icons or an email signup box. An admin system's footer is simpler, often just one line of copyright text, or none at all. In HTML it's the <footer> tag.
The footer is the last place people look when they can't find what they want. It's a good home for links that are rarely used but have to exist, like Contact us, Terms of use, and Careers. Don't put core feature links only in the footer. When the content is shorter than the screen, the footer should stick to the bottom of the window instead of floating in the middle of the page. This is called a sticky footer, and you can build it with Flexbox by making the main area fill the remaining height.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-footer- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
body > footerfooter[role="contentinfo"].ant-layout-footer.el-footer.arco-layout-footer.t-layout__footer.n-layout-footer
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026