Local Submenu

Questions? Ask in Slack #vcc-ui

@volvo-cars/react-local-submenu

A secondary navigation menu, typically displayed under the global navigation. It takes any number of links, shown horizontally on large breakpoints and transforms into a dropdown on small and medium breakpoints.

Installation

💡 This package includes Typescript definitions

📝 This package has built-in translations

LocalSubmenu sticks to the top of the page and follows the user when scrolling. When integrating with the global navigation, the global navigation is expected to stay in place (relative) while the LocalSubmenu sticks.

An example integration with the global navigation can be found in the kitchen-sink example.

Horizontal Navigation

LocalSubmenu behaves as a horizontal navigation on large breakpoints rendering all links in order and scrolls horizontally when links overflow the current viewport width. The current page is highlighted with an active prop on a LocalSubmenuLink.

() => {
  const links = [
    { text: 'Our story', href: '##', active: false },
    { text: 'Our heritage', href: '##', active: true },
    { text: 'Sustainability', href: '##', active: false },
    { text: 'Discover', href: '##', active: false },
  ];
  return (
    <Block
      extend={{
        height: 250,
        width: '95%',
        position: 'relative',
      }}
    >
      <LocalSubmenu header={links[1].text}>
        {links.map(({ href, text, active }, index) => (
          <LocalSubmenuLink href={href} key={index} active={active}>
            {text}
          </LocalSubmenuLink>
        ))}
      </LocalSubmenu>
    </Block>
  );
};

Dropdown Navigation

LocalSubmenu behaves as a dropdown on small and medium breakpoints, highlighting the current page with a header prop and active prop on the current page LocalSubmenuLink.

() => {
  const links = [
    { text: 'Our story', href: '##', active: false },
    { text: 'Our heritage', href: '##', active: true },
    { text: 'Sustainability', href: '##', active: false },
    { text: 'Discover', href: '##', active: false },
  ];
  return (
    <Block
      extend={{
        height: 260,
        position: 'relative',
      }}
    >
      <LocalSubmenu header={links[1].text}>
        {links.map(({ href, text, active }, index) => (
          <LocalSubmenuLink href={href} key={index} active={active}>
            {text}
          </LocalSubmenuLink>
        ))}
      </LocalSubmenu>
    </Block>
  );
};

Accessibility

The LocalSubmenu component is built with accessibility in mind following WAI:ARIA best practices:

• The LocalSubmenu component is contained within a navigation landmark region.
• The active element of the current page has aria-current set to page.

The LocalSubmenu component ships with built-in translations for aria-label when toggling the dropdown on small and medium breakpoints if used in conjunction with the Shared translations library.

Tracking

This component integrates with @volvo-cars/tracking, allowing us to dispatch tracking events to GTM. Each LocalSubmenuLink will send an interaction event with click eventAction when trackEventLabel prop is provided.

() => {
  const links = [
    { text: 'Our story', href: '##', active: false },
    { text: 'Our heritage', href: '/our-heritage', active: true },
    { text: 'Sustainability', href: '##', active: false },
    { text: 'Discover', href: '##', active: false },
  ];
  return (
    <Block
      extend={{
        height: 80,
        width: '95%',
        position: 'relative',
      }}
    >
      <TrackingProvider eventCategory="local submenu">
        <LocalSubmenu header={links[1].text}>
          {links.map(({ href, text, active }, index) => (
            <LocalSubmenuLink
              href={href}
              key={index}
              active={active}
              trackEventLabel={`${text} | ${href} | ${index}`}
            >
              {text}
            </LocalSubmenuLink>
          ))}
        </LocalSubmenu>
      </TrackingProvider>
    </Block>
  );
};

Clicking on "Our heritage" would send the following event for example

{
  "eventCategory": "local submenu",
  "eventAction": "click",
  "eventLabel": "our heritage | /our-heritage | 1",
  "event": "interaction"
}

API

Props - LocalSubmenu

| Name | Description | Type | Default Value | | ---------- | ----------------------------------------------------------- | -------------------------------------- | ------------------------------------------- | | children | A single or an array of ReactNodes of type LocalSubmenuLink | React.ReactNode ｜ React.ReactNode[] | n/a | | header | Header to be shown on mobile breakpoints | string | n/a | | onChange | onChange called when mobile dropdown is toggled | ((isOpen: boolean) => void) | n/a | | zIndex | | string ｜ number | calc(var(--sitenav-z-index-min, 990) - 1) |

Props - LocalSubmenuLink

| Name | Description | Type | Default Value | | ----------------- | --------------------------------------------------------------------------------------------------------- | --------- | ------------- | | active | Highlights link when true | boolean | false | | aria-label | An optional aria-label to add to the link | string | n/a | | children | Link text | string | n/a | | href | The URL that the link points to | string | n/a | | target | Anchor target | string | _self | | trackEventLabel | eventLabel to dispatch with the dataLayer event, event will not be dispatched if this is not provided | string | `` |