Footer
DraftAccessible
The Footer component is located at the bottom of the page below the main body content. It provides a place for secondary navigation, site-wide actions, and additional information.
Breaking change
The Footer component's look and use will be renewed in the next major release in order to have a unified look with Hel.fi.
- Usage
- Code
- Accessibility
- Customisation
Code
Code examples
Default
- React
Press Enter to start editing. Press Esc to stop editing.
import { Footer, IconFacebook, IconTwitter, IconInstagram, IconYoutube, IconTiktok } from 'hds-react';() => (<Footer title="Helsinki Design System" footerAriaLabel="HDS Footer"><Footer.Navigation navigationAriaLabel="HDS Footer navigation"><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /></Footer.Navigation><Footer.Utilities backToTopLabel="Back to top"><Footer.SoMe><Footer.Item icon={<IconFacebook />} /><Footer.Item icon={<IconTwitter />} /><Footer.Item icon={<IconInstagram />} /><Footer.Item icon={<IconYoutube />} /><Footer.Item icon={<IconTiktok />} /></Footer.SoMe><Footer.Item label="Contact us" /><Footer.Item label="Give feedback" /></Footer.Utilities><Footer.Base copyrightHolder="Copyright" copyrightText="All rights reserved"><Footer.Item label="Link" /><Footer.Item label="Link" /><Footer.Item label="Link" /><Footer.Item label="Link" /><Footer.Item label="Link" /></Footer.Base></Footer>)
Color variations
- React
Press Enter to start editing. Press Esc to stop editing.
import { Footer } from 'hds-react';() => (<><Footer title="Helsinki Design System" footerAriaLabel="HDS Footer"><Footer.Navigation navigationAriaLabel="HDS Footer navigation"><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /></Footer.Navigation><Footer.Base copyrightHolder="Copyright" copyrightText="All rights reserved"><Footer.Item label="Link" /><Footer.Item label="Link" /><Footer.Item label="Link" /></Footer.Base></Footer><br /><Footer title="Helsinki Design System" theme="dark" footerAriaLabel="HDS Footer"><Footer.Navigation navigationAriaLabel="HDS Footer navigation"><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /></Footer.Navigation><Footer.Base copyrightHolder="Copyright" copyrightText="All rights reserved"><Footer.Item label="Link" /><Footer.Item label="Link" /><Footer.Item label="Link" /></Footer.Base></Footer></>)
Navigation section variations
- React
Press Enter to start editing. Press Esc to stop editing.
import { Footer } from 'hds-react';() => (<><Footer title="Default" footerAriaLabel="HDS Footer"><Footer.Navigation navigationAriaLabel="HDS Footer navigation"><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /></Footer.Navigation></Footer><br /><Footer title="Minimal" footerAriaLabel="HDS Footer"><Footer.Navigation variant="minimal" navigationAriaLabel="HDS Footer navigation"><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /><Footer.Item label="Item" /></Footer.Navigation></Footer><br /><Footer title="Sitemap" footerAriaLabel="HDS Footer"><Footer.Navigation variant="sitemap" navigationAriaLabel="HDS Footer navigation">{[1, 2, 3, 4].map((key) =><Footer.ItemGroup key={key}><Footer.Item label="Item" /><Footer.Item subItem label="Sub item" /><Footer.Item subItem label="Sub item" /><Footer.Item subItem label="Sub item" /><Footer.Item subItem label="Sub item" /><Footer.Item subItem label="Sub item" /><Footer.Item subItem label="Sub item" /></Footer.ItemGroup>)}</Footer.Navigation></Footer><br /><Footer title="Hidden" footerAriaLabel="HDS Footer" /></>)
Packages
| Package | Included | Storybook link | Source link |
|---|---|---|---|
| HDS React | Yes | View in Storybook | View source |
| HDS Core | No | - | - |
Properties
The Footer component consists of multiple components that all have their own properties. Refer to the React Storybook to see properties of all Footer components.