Footer
Footers display secondary links, legal text, and branding at the bottom of an app or page.
Overview
A footer sits at the bottom of an app or page and holds the content users rarely need but should always be able to find: links to about, contact, and privacy pages, copyright text, and a brand graphic. It adapts to the available width, laying items out in a row on wide screens and stacking them on narrow ones.
Footers are typically paired with an app layout, which places the footer below the main content.
Usage
forge-footer wraps one forge-footer-item per link or line of text, and accepts a graphic slot for a logo. Set layout to standard, alternative, or auto (the default); in auto, the footer switches to the alternative layout below layoutBreakpoint (900px by default). Use a footer for persistent, low-priority links and legal text; for primary navigation, use a tab bar or drawer instead.
Slot locations
Rules
forge-footer-item.alt text, or an empty one if it is decorative.layout on auto so the footer adapts to narrow screens.forge-footer-item — it won't be exposed as a list item.Basic usage
Each forge-footer-item holds a link or text, and the graphic slot holds a logo.
A footer with links, copyright text, and a graphic.
A footer component for displaying navigation, copyright, and branding information at the bottom of a page.
import "@tylertech/forge/footer";| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
layout | — | FooterLayout | 'auto' | Defines the footer layout mode. |
layoutBreakpoint | — | number | 900 | Width breakpoint in pixels used when layout is set to `auto`. |
| Name | Description |
|---|---|
(default) | Slot for footer items or custom content. |
graphic | Slot for footer graphic, such as a logo. |
| Name | Description |
|---|---|
::part(root) | The root container element. |
::part(content) | The list container for footer items. |
| Name | Description |
|---|---|
--forge-footer-background | Controls the background color of the footer. |
--forge-footer-on-background | Controls the text color of footer content. |
--forge-footer-padding | Controls the padding of the footer. |
--forge-footer-padding-left | Controls the left padding of the footer. |
--forge-footer-padding-right | Controls the right padding of the footer. |
--forge-footer-gap | Controls the gap between footer content and graphic in standard layout. |
--forge-footer-alternative-gap | Controls the gap between stacked elements in alternative layout. |
--forge-footer-divider-margin | Controls the margin around dividers between footer items. |
Landmark and list roles
forge-footer has the contentinfo role, so assistive technology exposes it as the page’s footer landmark. Its items are wrapped in a list, and each forge-footer-item has the listitem role, so screen readers announce the number of items.
Only one contentinfo landmark should be exposed per page. Don’t add role="contentinfo" to other elements on the page.
Keyboard interaction
The footer doesn’t manage focus itself. Interactive content you slot into it, like links, follows the normal tab order.
| Key | Action |
|---|---|
| Tab | Moves focus to the next link in the footer. |
| Shift + Tab | Moves focus to the previous link in the footer. |
| Enter | Activates the focused link. |
Labeling
Give a slotted graphic link an accessible name through the image’s alt text, such as “Empowered by Tyler Technologies”. If a page has more than one footer-like region, set aria-label on the footer to tell them apart.