Sticky Navigation for volvocars.com

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 | Required | 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.

Bug Report

Please report any issues and bugs to the Web Impressions board in JIRA.

Changelog

See our CHANGELOG

Support

If you have any questions or need help using this component please shout out on the ced-wi-general (Web Impressions) slack channel.