Breadcrumb

Overview

The breadcrumb component is a key part of a site's navigation system, helping users understand their location within the site's hierarchy. It also provides an easy way to navigate through different levels of the site.

Basic usage

Importing the component

To use the breadcrumb component, import both the component and the necessary styles, including the tooltip dependency.

                                                        
                                                        
                                                            import { DsBreadcrumb } from "@coloplast/design-system";
                                                        import "@coloplast/design-system/dist/components/breadcrumb/ds-breadcrumb.css";
                                                        // The tooltip styling is needed for the overflow menu
                                                        import "@coloplast/design-system/dist/components/tooltip/ds-tooltip.css";
                                                        
                                                            

Example usage

You can create an array of breadcrumb items and pass them as a prop to the component. Each item should include the page name, a flag to indicate if it is the current page, and the URL.

                                                        
                                                        
                                                            // Example breadcrumb items
                                                        const breadcrumbItems = [
                                                          {
                                                            name: "Home",
                                                            isCurrentPage: false,
                                                            url: "/",
                                                          },
                                                          {
                                                            name: "Section",
                                                            isCurrentPage: true,
                                                            url: "/section",
                                                          },
                                                        ];
                                                        
                                                        // In your template:
                                                        <DsBreadcrumb
                                                          ariaLabel="Breadcrumb"
                                                          :items="breadcrumbItems"
                                                          overflowMenuTooltipText="More items"
                                                        ></DsBreadcrumb>
                                                        
                                                            

Component playground and props

Here’s an interactive example of the component from Storybook. To test out the props, refer to the ‘Controls’ tab on the story.

Accessibility

The breadcrumb component is wrapped in a <nav> element to indicate its role as navigation.

To further distinguish it from other navigational elements on the page, you should provide an aria label that describes the type of navigation, such as "Breadcrumb".

The component's overflow menu includes a tooltip that explains its functionality. When title truncation occurs, the full text remains accessible through the DOM and is available to screen readers via the title attribute.

All breadcrumb items are keyboard navigable, and the component provides clear focus states for improved accessibility.

Internationalisation

The breadcrumb component fully supports right-to-left (RTL) languages and has been tested in RTL environments. All labels can be managed via props, making the component flexible for multilingual contexts.

SEO

Since the breadcrumb is rendered client-side, consider implementing structured data using server-side rendering for SEO benefits. Alternatively, you can server-render the static markup and replace it in the client.