diff options
Diffstat (limited to 'src/components/molecules/nav/breadcrumb.tsx')
| -rw-r--r-- | src/components/molecules/nav/breadcrumb.tsx | 22 |
1 files changed, 18 insertions, 4 deletions
diff --git a/src/components/molecules/nav/breadcrumb.tsx b/src/components/molecules/nav/breadcrumb.tsx index 6dc86a0..d184d65 100644 --- a/src/components/molecules/nav/breadcrumb.tsx +++ b/src/components/molecules/nav/breadcrumb.tsx @@ -27,6 +27,10 @@ export type BreadcrumbProps = { */ className?: string; /** + * Set additional classnames to the breadcrumb items. + */ + itemClassName?: string; + /** * The breadcrumb items */ items: BreadcrumbItem[]; @@ -37,9 +41,19 @@ export type BreadcrumbProps = { * * Render a breadcrumb navigation. */ -const Breadcrumb: FC<BreadcrumbProps> = ({ items, ...props }) => { +const Breadcrumb: FC<BreadcrumbProps> = ({ + itemClassName = '', + items, + ...props +}) => { const intl = useIntl(); + const ariaLabel = intl.formatMessage({ + defaultMessage: 'Breadcrumb', + description: 'Breadcrumb: an accessible name for the breadcrumb nav.', + id: '28nnDY', + }); + /** * Retrieve the breadcrumb list items. * @@ -49,12 +63,12 @@ const Breadcrumb: FC<BreadcrumbProps> = ({ items, ...props }) => { const getListItems = (list: BreadcrumbItem[]): JSX.Element[] => { return list.map((item, index) => { const isLastItem = index === list.length - 1; - const itemClassnames = isLastItem + const itemStyles = isLastItem ? `${styles.item} screen-reader-text` : styles.item; return ( - <li key={item.id} className={itemClassnames}> + <li key={item.id} className={`${itemStyles} ${itemClassName}`}> {isLastItem ? item.name : <Link href={item.url}>{item.name}</Link>} </li> ); @@ -96,7 +110,7 @@ const Breadcrumb: FC<BreadcrumbProps> = ({ items, ...props }) => { type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }} /> - <nav {...props}> + <nav aria-label={ariaLabel} {...props}> <span className="screen-reader-text"> {intl.formatMessage({ defaultMessage: 'You are here:', |