Overview
The service navigation component is a top-level navigation bar for linking to key pages and supports a filterable popover list of links that can be used for language and country selection.
Basic usage
Importing the component
To use the service navigation component, import it from the design system package along with its associated styles.
import { DsNavService } from "@coloplast/design-system";
import "@coloplast/design-system/dist/components/nav/service/ds-nav-service.css";
Example usage
For server-side rendering, provide static HTML within the component. The Vue component will swap out the server-rendered markup for the dynamic markup.
<DsNavService
aria-label="Service navigation"
:items="[{
itemId: "service1",
linkUrl: "/service-one",
text: "Service nav item one"
}]">
<!-- Statically render the links here too for SEO and preventing CLS -->
</DsNavService>
Component playground and props
Explore the different properties and configurations for the service navigation component using the Storybook playground.
Navigation item configuration
/*
----------------------
Simple navigation item
----------------------
*/
{
itemId: "itemId1", // unique id for the nav item
linkUrl: "/service-nav-item", // url to navigate to
text: "Service nav item", // text label displayed in the link
type: "service", // the type of navigation item
}
/*
--------------------------
Language selection example
--------------------------
*/
{
filterEnabled: false, // should the list have a filter input
itemId: "languageItemId", // unique id for the nav item
text: "Language", // text label displayed in the button
type: "popover", // indicates that this is a popover
children: [ // child items
{
itemId: "lang1", // unique id
linkUrl: "#", // url to navigate to
text: "English", // text label displayed in the link
type: "service", // the type of the nav item
isActive: true, // indicates whether the item is active
},
{
itemId: "lang2",
linkUrl: "#",
text: "Dansk",
type: "service",
},
],
}
/*
--------------------------
Country selection example
--------------------------
*/
{
filterEnabled: true, // should the list have a filter input
filterNoResultsLabel: "No results found", // no results label
filterPlaceholder: "Filter countries", // placeholder text label
iconName: "globe", // optional icon
itemId: "service3", // unique id for the item
text: "Corporate", // display label
type: "popover", // indicates that this is a popover
attributes: { // attributes to render on the link
"data-fn": "customFn",
"data-event": "eventToTrigger",
"data-event-parameter": "eventParam",
"data-flow-name": "SignIn",
},
children: [ // list of child items
/* ... */
{
itemId: "country45",
linkUrl: "#",
text: "United Kingdom",
textAlternative: "England", // alternative spellings/names to filter against
type: "service",
},
{
itemId: "country46",
linkUrl: "#",
text: "USA",
type: "service",
},
],
}
Accessibility
The service navigation component includes several accessibility features:
- Navigation semantics: The <nav> element signals to assistive technologies that this is a form of navigation, with an aria-label to clarify the purpose.
- Keyboard navigation: The navigation is fully keyboard navigable with focus states, toggles for popovers, and return of focus states upon closing the popovers.
SEO
Server-side rendering of the service navigation is important for SEO, as changes to the service navigation will be picked up more frequently.
Internationalisation
The navigation supports right-to-left rendering and labels are fully configurable.