BridgeBeta
  • Brand
  • Digital Assets
    Foundations
    Icons
    Components
    Templates
  • Resources
    Design Tokens
    How-tos
    Best Practices
    Libraries
    Accessibility
    Products List
  • Support
    • Overview
    • Actions
      • Overview
      • Button
      • ContextMenu
      • Link
    • Controls
      • Overview
      • Checkbox
      • Tag
      • Toggle
    • Forms
      • Overview
      • DatePicker
      • FileUploader
      • Input
      • NumberInput
      • RadioButton
      • Search
      • Select
      • Slider
      • TextArea
      • TextInput
    • Hooks
      • useIsomorphicLayoutEffect
      • useMediaQuery
      • useSettings
    • Navigation
      • Overview
      • AnchorNavigation
      • BannerNavigation
      • Breadcrumb
      • Footer
      • InfoBar
      • MainNavigation
      • SecondaryNavigation
      • StepNavigation
      • SubNavigation
    • Overlay
      • Overview
      • Credits
      • Modal
      • ModalWrapper
      • Notification
      • Tooltip
    • Structure
      • Overview
      • Accordion
      • AuthLayout
      • Avatar
      • Callout
      • Card
      • ContentSwitcher
      • Empty
      • Hero
      • InlineLoading
      • Item
      • List
      • Loading
      • mdxComponents
      • Module
      • Pagination
      • ReadMore
      • Story
      • Table
      • Tabs
      • Text
      • Unit
      • User
      • WFPCoreProvider
      • Wrapper
Components
Navigation

Footer

  • Design
  • Code
  • Props

A section typically located at the bottom of a webpage or application layout, containing navigational links, copyright information, and other relevant content.

It is the second most important place where your basic site information and links should live. Users turn often to the footer to look for important information, such as contact details, or links to less prominent sections of the website (privacy policy, terms of use, etc).

Examples

Figma image

Anatomy

Figma image

When to use

  • Use the 'Footer' component to provide supplementary information such as contact details, legal links, or social media links.
  • Utilize it to enhance navigation by including links to important sections or pages within the application or website.
  • Use when you want to share information like contacts details, privacy policy, terms of use, copyright.
  • Use to provide supplementary information such as contact details, legal links, or social media links.

When not to use

  • Avoid using the FOOTER component in places where it disrupts the overall layout or detracts from the primary content.
  • The Footer component should only be used once per page at the end of the page.
  • Do not overload the Footer with excessive links or content, as it may overwhelm users and diminish its effectiveness.

Alternative components

If the Footer component does not suit the context, consider using a sticky navigation bar or a collapsible sidebar to house supplementary information and navigation links.

Related

  • Link
  • Form
  • Button

On this page

  • Examples
  • Anatomy
  • Alternative components
  • Related

References

  • Storybook
Storybook
Figma library
Contact us
2025 © World Food Programme