Footer

Footer is used at the bottom of an application. It provides buttons that link to company information and other important links to secondary pages that may not be part of the Header navigation structure.

A footer is a consistent element to be used at the bottom of all of your applications or webpages. Unlike Header, Footer is not as flexible and contains certain required elements.

The most common footer is an App footer which is contains legal and other important resources that pertain to the entirety of an application.

The other type of footer is a Page footer which contains additional actions or resources specific to a single page of an application.

A simple, clean and straightforward app footer displays useful information for the user that couldn’t be displayed on the header. This Footer is typically present on every screen of an application and its contents are universal to the entire application.

Always provide these essential links in your footer:

1. Copyright information - It is vital to make it clear that the content within the website and applications is protected and copyrighted.
2. Terms of Use - These guidelines will help ensure partners and customers the terms of doing business with us.
3. Privacy - As a large corporation, it is essential to display a link to our privacy policy page to let users know that we follow GDPR laws.
4. Security - It is important for users to get an overview that explains our security processes and tools that are used to protect data and users.

Check out this simple Footer example to see how these essential elements are included within a Footer.

A page-level Footer provides additional resources or functions for a single page within an application.

A page-level Footer should:

• always be used in addition to the App Footer
• be placed above the App Footer in the layout
• contain actions relevant to a single page of an app

For more guidance, check out an example of how to use a page-level footer.

Wrap buttons at the bottom of a page in a Footer to inform screen readers that the contained content is part of a page footer. This meets accessibility requirements to contain all page content in relevant landmarks. For more information, you can read more on using landmarks to identify page regions.

There are various action elements that may live in a Footer, depending on the application or page context.

A Page Footer should never replace the App Footer. It should be used in addition to the App Footer and placed above the App Footer in the layout. The actions or resources within a Page Footer should pertain only to the content within the current page.

Here is how to stack a Page Footer with an App Footer in your layout.