GlobalNav

Notes

Starbucks global navigation which includes a logo, navigation links, optional auxiliary nav, and a 'hamburger' menu button. The links and auxiliary nav will be measured, and if they do not fit in the user's viewport, they will be suppressed and a hamburger button shown instead. The nav links will never show in viewports smaller than 768. Clicking the hamburger button opens a navigation panel which shows the nav (this behavior can be turned off for custom solutions).

Props

accountButton
shape {
childrenstring*
Becomes the text of the button

}
Props passed to button which links to the account section for authenticated users. Only children is required; you may pass a tagName, to/href/onClick, className, etc. Including this prop will place the button in a prescriptive location in desktop and mobile layouts. If accountNav is provided, this prop is ignored.
accountNav
shape {
childrenstring*
Becomes the text of button to open the subnav

onClickfunc
Additonal optional handler applied after the default click handler

subNavItems
arrayOf [
shape { }
]
Required array of links for the account submenu

}
If accountNav is provided, the global nav will render distinct submenus in desktop and mobile viewports. This submenu is geared toward the starbucks.com implementation of a user's account-related navigation choices, but can really have any set of links.
auxiliaryContentelementType
If you supply auxiliaryContent (as a reference to a React component), it will take the place of the buttons which appear on the right side of the main navList in the desktop view and under the main navList in the mobile view. (ie. Find a Store, Sign in/out, Join now/Account).
classNamestring
Optional CSS class which will be applied to the top-level header element
findAStorePin
shape {
classNamestring
otherPropsobject
All of the other props needed; you may pass a tagName, to/href/onClick, etc. Note that className should be passed separately, if needed.

textstring*
Text, preferably in the format "Find a store", to be applied to the find a store pin link

activebool
Optional boolean to enable an active state for the Find a Store pin

}
Props passed to the underlying component. Including this prop will place the button in a prescriptive location in desktop and mobile layouts.
fixedWhenHamburgerNavOpenbool[true]
Set to false if you do not want the header element to become fixed when the hamburger nav is open. Fixed position addresses some scrolling issues, but may create others, depending on the layout of the consuming app.
hamburgerNavFooterelementType
Optional component to be rendered at the bottom of the hamburger nav, eg. to render legalese.
hamburgerNavPropsobject[{}]
Additional props to be spread on the hamburger nav's root element
headerPropsobject
Additional props to be spread on the header element
hideMobileBottomShadowbool[false]
Set to true if you do not want a drop shadow applied to the Nav in mobile mode
isUserAuthenticatedbool[false]
Whether the user is signed into the application or not
joinNowButton
shape {
childrenstring*
Text of the button

}
Props passed to button which links to the account create page for unauthenticated users; you may pass a tagName, to/href/onClick, className, etc. Including this prop will place the button in a prescriptive location in desktop and mobile layouts.
logoPropsobject[{}]
Any extra props needed for the child Logo component
menuButtonProps
shape {
labelstring
A11y text applied to the menu/hamburger button if useBuiltInHamburgerNav is false

labelWhenClosedstring
A11y text for the menu/hamburger button when the hamburger nav is closed

labelWhenOpenstring
A11y text for the menu/hamburger button when the hamburger nav is open

onClickfunc
Click handler for hamburger button. If useBuiltInHamburgerNav is true, this becomes an additonal optional handler applied after the default click handler.

}
[{}]
Props for the "hamburger" menu button
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.
navItems
arrayOf [
shape {
subNavItems
arrayOf [
shape { }
]
Array of navigation links for the push view nav

}
]
[[]]
Array of navigation links for the main part of the nav
onHamburgerNavIsOpenChangefunc
Optional function which will be called with a single boolean argument representing whether the hamburger nav is open or not; called on isHamburgerNavOpen change.
pushViewButtonLabelsobject
A11y text for the mobile nav view items having a button
signInButton
shape {
childrenstring*
Becomes the text of the button

}
Props passed to button which links to the login page for unauthenticated users. Only children is required; you may pass a tagName, to/href/onClick, className, etc. Including this prop will place the button in a prescriptive location in desktop and mobile layouts.
signOutButton
shape {
childrenstring*
Becomes the text of the navigation link

}
Props passed to button which lets authenticated users sign out. Only children is required; you may pass a tagName, to/href/onClick, className, etc. Including this prop will place the button in a prescriptive location in desktop and mobile layouts.
useBuiltInHamburgerNavbool[true]
If you have a custom solution for a mobile nav, you can disable the built in hamburger nav that this component provides.
useCrateLayoutbool[false]
Sets the background color of the desktop accountNav appropriately
useHamburgerMenuButtonbool[true]
When false, the hamburger menu button (and hamburger nav) will not render.
useMaxWidthLayoutbool[false]
When true, at a custom breakpoint (currently 1702px) everything but the logo is centered in a max width container (logo hangs off to the left).

Example: GlobalNav - Basic version shows a list of links; subNavItems are shown in mobile nav only

Example: GlobalNav - Use auxiliary content option to display custom content adjacent to main nav

Example: GlobalNav - If provided, any of the optional buttons will show

Example: GlobalNav - using accountNav instead of accountButton

Example: Global Nav (German) with no sign out button

Example: Global Nav with Max Width Option

Notes

A navbar designed to work within the header crate which includes a logo, navigation links, and a 'hamburger' menu button. Given a prop for viewport width, this component will calculate which nav items fit in the viewport and hide any that would be truncated.

The navbar is expected to be visually positioned within the HeaderCrate and has predefined styles to facilitate that positioning.

Props

headerPropsobject
Additional props to be spread on the header HTMLElement.
itemsarray
logoPropsobject
messages
shape {
menuCloseLabelstring
menuLabelstring
}
navOverlayActivebool
hideNavOverlayfunc
showNavOverlayfunc
viewportWidthnumber

Example: Nav Bar

<div style={ { height: '106px' } }>
  <NavBar
    logoProps={ {
      href: '/',
      name: 'Starbucks Coffee Company',
      tagName: 'a'
    } }
    items={ [
      {
        children: 'Item with long name',
        href: '#'
      },
      {
        children: 'Item with long name',
        href: '#'
      },
      {
        children: 'This item may or may not fit',
        href: '#'
      },
      {
        children: 'This item will be hidden automatically since it does not fit',
        href: '#'
      }
    ] }
    messages={ {
      menuLabel: 'Menu',
      menuCloseLabel: 'Close'
    } }
    showNavOverlay={ () => { alert('Provide a handler for showing a mobile nav') } }
    hideNavOverlay={ () => { alert('Provide a handler for closing an open mobile nav') } }
  />
</div>

Example: Nav Bar - Dark Theme

<ThemeContext.Provider value={ themes.dark }>
  <div style={ { height: '106px' } }>
    <NavBar
      logoProps={ {
        href: '/',
        name: 'Starbucks Coffee Company',
        tagName: 'a'
      } }
      items={ [
        {
          children: 'Order',
          href: '#'
        },
        {
          children: 'Cards',
          href: '#'
        },
        {
          children: 'Gift',
          href: '#'
        },
        {
          children: 'Stores',
          href: '#'
        }
      ] }
      messages={ {
        menuLabel: 'Menu',
        menuCloseLabel: 'Close'
      } }
      showNavOverlay={ () => { alert('Provide a handler for showing a mobile nav') } }
      hideNavOverlay={ () => { alert('Provide a handler for closing an open mobile nav') } }
    />
  </div>
</ThemeContext.Provider>

Subnav

Notes

A subnav element for use in the HeaderCrate. Includes an optional primary link/page title, an optional breadcrumb link, and a list of links, rendered as scrolling tabs on small screens and as a stacked list on large screens.

Props

breadcrumb
shape {
childrenany*
Content for the 'back' breadcrumb, can be a string or a component

tagNameany
HTML element or React component to use for this item. Defaults to a.

}
Props for the breadcrumb nav item. Passes any unrecognized props along to the rendered link, allowing you to include event handlers, DOM attributes, children, and more.
primary
shape {
childrenany*
Content for the primary link, can be a string or a component

containerClassNamestring
CSS class applied to the heading wrapper of the primary breadcrumb

customComponentany
Allows the user to pass in a custom element instead of the opinionated default Primary component.

headingTagNameany
Optional tagName for primary nav item. Defaults to p, but can be set to h1, h2, etc depending on needs.

includeLinkbool
Flag to optionally disable rendering the primary item as a link. If includeLink is false, the primary item is rendered as text, not a link.

tagNameany
HTML element or React component to use for this item. Defaults to a.

}
Props for the primary nav item or page title. Passes any unrecognized props along to the rendered link, allowing you to include event handlers, DOM attributes, children, and more.
items
arrayOf [
shape {
activebool
Flag to apply when a user is on the page matching this nav item. Adds an underline and adjusted text styles to active items.

childrenany*
Content for each list item, can be a string or a component

tagNameany
HTML element or React component to use for this item. Defaults to a.

}
]
An array of nav item props objects. Passes any unrecognized props along to the rendered links, allowing you to include event handlers, DOM attributes, children, and more.

<div className='relative p4'>
  <Subnav
    breadcrumb={ {
      children: 'Home',
      href: '#'
    } }
    primary={ {
      children: 'Account',
      href: '#'
    } }
    items={ [
      { children: 'History', href: '#', active: true },
      {
        children: 'Settings',
        href: '#',
        onClick: () => { alert('You clicked settings!')}
      }
    ] }
  />
</div>

GlobalSubnav

Notes

A subnav element intended to be used in tandem with GlobalNav. It does not follow the crate system, but takes up the full width of the browser at all times. GlobalSubnav has support for themes and for styling over the default background colors and borders.

Props

ariaLabelstring*
aria-label applied to root
element.
items
arrayOf [
shape {
activebool
Flag to apply when a user is on the page matching this nav item. Adds an underline and adjusted text styles to active items.

childrenany*
Content for each list item, can be a string or a component.

tagNameany
HTML element or React component to use for this item. Defaults to a.

}
]
An array of nav item props objects. Passes any unrecognized props along to the rendered links, allowing you to include event handlers, DOM attributes, children, and more.
classNamestring
ClassName will overwrite the container's background and border styling.

GlobalNav

Notes

Props

Example: GlobalNav - Basic version shows a list of links; subNavItems are shown in mobile nav only

Example: GlobalNav - Use auxiliary content option to display custom content adjacent to main nav

Example: GlobalNav - If provided, any of the optional buttons will show

Example: GlobalNav - using accountNav instead of accountButton

Example: Global Nav (German) with no sign out button

Example: Global Nav with Max Width Option

Navbar

Notes

Props

Example: Nav Bar

Example: Nav Bar - Dark Theme

Subnav

Notes

Props

GlobalSubnav

Notes

Props

Example: GlobalSubnav

Example: GlobalSubnav dark theme

Example: Global Nav and Subnav