@volvo-cars/sticky-nav-component NPM

Sticky Navigation for volvocars.com

sticky-nav-github-example

Check out our Storybook for examples

Behavior

The <StickyNav /> component can show up to 5 given links. It has a breakpoint at 900px where it goes from desktop from/to tablet/mobile.

Desktop (900px and above)

On desktop all links will be accessible from the left or right side of the screen. The icons will always be visible and the nav will slide out on hover and reveal the links. There hover area is the visible element aswell as a 50px padding around them to make it more accessible.

Tablet / mobile (less than 900px)

On mobile they will attach to the bottom of the screen and hide/show on scroll up/down. On mobile it will show 3 - 5 links, depending on the width of the viewport. We suggest that the given links are in a prioritized order with the more important links first, as the last 2 links wont be visible on smaller screens.

Requirements

vcc-ui is a peer dependency
Your application should already have been wrapped in a <StyleProvider> and <ThemeProvider>

Install

Install the package:

npm install @volvo-cars/sticky-nav-component
# or
yarn add @volvo-cars/sticky-nav-component

Usage

NOTE: Data from the Content API is not yet available.

~~The data and content are not provided in this package. You will need to fetch content from the VCC Content Delivery API. Please contact Content Delivery API team for more information.~~

import { StickyNav, StickyNavItem, StickyNavIcon } from "@volvo-cars/sticky-nav-component"

const myApp = () => (
  ...
  // Simple usage
  <StickyNav
    items={arrayOfLinkItems}
  />
  ...

  // Componentized usage
  <StickyNav>
    <StickyNavItem
      href="/chat"
      icon="chat"
    >
      Chat
    </StickyNavItem>
    ...
  </StickyNav>
  ...

  // Custom icon example
  <StickyNav>
    <StickyNavItem
      onClick={() => toggleChatFn()}
      icon={
        <>
          <StickyNavIcon type="chat" color="currentColor" />
          <MyCustomOverlayComponent />
        </>
      }
    >
      Chat
    </StickyNavItem>
    ...
  </StickyNav>
  ...
)

Props

`<StickyNav>`

The base component for the sticky navigation.

Props	Type	Description	Default
`items`	`StickyNavItems`	Array of link objects, as an alternative to nested components	`[]`
`zIndex`	`number`	Can be overridden if default doesn't fit the solution	`5000`
`fontSizePreset`	`string`	Change font size by preset (`small`, `normal`, `large`)	`normal`
`textTransform`	`string`	Change text transform (`none`, `uppercase`, `full-size-kana`)	`none`

`<StickyNavItem>`

The <StickyNavItem> component is an anchor tag under the hood and takes the standard attributes like href, target, onClick, etc as well as the custom props below:

Props	Type	Description	Required	Default
`icon`	`string` or `jsx`	Either a string that refers to a default icon or custom JSX		`null`

`<StickyNavIcon>`

The <StickyNavIcon> has a set of available icons listen in the section below.

Props	Type	Description	Required	Default
`type`	`string`	See the list under "Icons" below for available icons		`question-mark` (fallback)
`color`	`string`	Color of the icon		`#000`

Icons

Available icons for the links are the following:

build
chat
download-brochure
find-a-dealer
phone
question-mark
request-a-quote
request-an-offer
subscribe
test-drive

(See the Storybook for examples)

Tracking

<StickyNav> component is doing interaction tracking if you set up Google Tag Manager (GTM) properly on your page. If you don't have GTM it should silently ignore and work as usual.

We highly recommend you to enable tracking. It will allow us to have a better understating of the actual usage of the component and improve it based on the data we gather.

Please contact the analytics team in order to set up the Google Tag Manager.