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.
💡 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.
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>
);
};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>
);
};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-currentset topage.
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.
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"
}| 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) |
| 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 |
`` |