Footer

Notes

An opinionated footer separated into 4 functional sections:

primaryLinkLists lives at the top. It contains the main links that direct users to points of interest. Renders as columns or expanders. If alwaysUseMobileLayout is true, or number of lists exceed 5, then primaryLinkLists only renders as expanders.
Underneath is socialMediaIcons, a row of icons that link the user to external social media sites.
Under that is secondaryLinkList, a link list of a minimal number of links to direct users to terms and conditions, etc.
And lastly, finePrintText, which reserves the web page for Starbucks Coffee Company.

Props

alwaysUseMobileLayoutbool[false]
Will the Footer be a ContentCrate or have the full width of the window? When set to true, the primaryLinkLists will render in columns and secondaryLinkList will render inline above the large breakpoint (1024px). When set to false, primaryLinkLists renders in CaretExpanders only, and secondaryLinkList in block.
classNamestring
Applied to the
tag.
languageSelector
shape {
textstring
The text of the link

hrefstring
The href of the link to change the language

onClickfunc
The function that calls a language change

targetLocalestring
The language of the text

}
[{}]
Shows language selector. If nothing is passed, the selector will not be shown.
navAriaLabelstring
If your app includes multiple nav elements, include an aria label to help distinguish each nav region. Note that the screenreader will add the word "navigation", so that term is repetitive in any aria label. A good label might be 'Global footer'.
primaryLinkLists
arrayOf [
shape {
headingTextany*
The text sent as the heading of each primaryLinkLists group

ariaExpandButtonLabelstring*
Label for caret button that indicates expander functionality

links
arrayOf [
shape {
textany*
The text of the link

hrefstring
The href of the link

tagNameany
Tag for the link, defaults to a standard anchor if not present

tostring
When using React Router, the links will often receive a 'to' prop

}
]
Each child link for a primaryLinkLists group

}
]
[[]]
The main footer content; renders lists of links in either columns or expanders. If number of lists is more than 5, lists are rendered in expanders only.
primaryLinkListsHeadingProps
shape {
tagNameany
sizestring
}
[{}]
Props to pass through to Heading, including tagName, size, className, etc. See Heading for more info.
socialMediaIcons
arrayOf [
shape {
namestring*
Names available: 'facebook', 'instagram', 'pinterest', 'spotify', 'twitter', 'youtube'

urlstring*
ariaLabelstring
Label for social media icon. Defaults to name of icon.

}
]
[[]]
Data sent to SocialMediaIconGroup
secondaryLinkList
arrayOf [
shape {
textany*
The text of the link

hrefstring
The href of the link

tagNameany
Tag for the link, defaults to a standard anchor

tostring
When using React Router, the links will often receive a 'to' prop

}
]
[[]]
A secondary footer list, good for any content that doesn't fit in the primary lists. If number of links is more than 6, lists are rendered in block only
finePrintTextany['']
Text to reserve copyright at bottom of footer.
noGuttersbool[false]
Remove any preset left/right padding on the footer element
useCrateLayoutbool[false]
Set to true for pages using the HeaderCrate and ContentCrate to get proper gutters
useMaxWidthLayoutbool[false]
Set to true to have it align with pages like the starbucks.com homepage, whose content blocks use the site max width container

Example: Footer in mobile layout

<Footer
  alwaysUseMobileLayout
  className="py3 px3 lg-px7"
  data-e2e="test-hook"
  navAriaLabel="Global footer"
  noGutters
  primaryLinkListsHeadingProps={{
    size:"sm",
    tagName: "h4",
  }}
  primaryLinkLists={[
    {
      headingText: "About Us",
      ariaExpandButtonLabel:"Expand to see About us content",
      links: [
        { text: "Our Heritage", href: "#" },
        { text: "Our Coffee", href: "#" },
        { text: "Stories", href: "#", target: "_blank" }
      ]
    },
    {
      headingText: "Careers",
      ariaExpandButtonLabel: "Expand Careers",
      links: [
        { text: "Culture and Values", href: "#" },
        { text: "Diversity and Inclusion", href: "#" }
      ]  }
  ]}
  socialMediaIcons={[
    {
      name: "facebook", url: "https://facebook.com/starbucks"
    }, {
      name: "instagram", url: "https://instagram.com/starbucks"
    }, {
      name: "twitter", url: "https://twitter.com/starbucks"
    }, {
      name: "spotify", url: "https://spotify.com/starbucks"
    }
  ]}
  secondaryLinkList={[
    { text: "Privacy Statement", href: "#", target: "_blank" },
    { text: "Terms of Use", href: "#" },
    { text: "Web Accessibility", href: "#" },
    { text: "Submit Your Ideas", href: "#" }
  ]}
  languageSelector={{
    text:"Passer au site français",
    href: "#",
    targetLocale: "fr-CA",
    onClick: () => { console.log('Switching to French')}
  }}
  finePrintText="© 2019 Starbucks Coffee Company. All rights reserved."
/>

Footer

Notes

Props

Example: Footer in mobile layout

Example: Footer on a full viewport layout

Example: Footer limited to site max width on large screens