diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb-story.js b/packages/react/src/components/Breadcrumb/Breadcrumb-story.js index 8e0616d83c64..2a1a1990a653 100644 --- a/packages/react/src/components/Breadcrumb/Breadcrumb-story.js +++ b/packages/react/src/components/Breadcrumb/Breadcrumb-story.js @@ -37,6 +37,7 @@ export const breadcrumb = () => ( </BreadcrumbItem> <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem> <BreadcrumbItem href="#">Breadcrumb 3</BreadcrumbItem> + <BreadcrumbItem>Breadcrumb 4</BreadcrumbItem> </Breadcrumb> ); @@ -53,6 +54,7 @@ export const breadcrumbWithOverflowMenu = () => ( </OverflowMenu> </BreadcrumbItem> <BreadcrumbItem href="#">Breadcrumb 5</BreadcrumbItem> + <BreadcrumbItem>Breadcrumb 6</BreadcrumbItem> </Breadcrumb> ); @@ -74,5 +76,6 @@ export const playground = () => ( <BreadcrumbItem href="#" {...props()}> Breadcrumb 3 </BreadcrumbItem> + <BreadcrumbItem>Breadcrumb 4</BreadcrumbItem> </Breadcrumb> ); diff --git a/packages/react/src/components/Breadcrumb/BreadcrumbItem.js b/packages/react/src/components/Breadcrumb/BreadcrumbItem.js index 66f728367260..74168c8e67ec 100644 --- a/packages/react/src/components/Breadcrumb/BreadcrumbItem.js +++ b/packages/react/src/components/Breadcrumb/BreadcrumbItem.js @@ -53,12 +53,16 @@ const BreadcrumbItem = React.forwardRef(function BreadcrumbItem( ); } - if (typeof children === 'string' && href) { + if (typeof children === 'string') { return ( <li className={className} ref={ref} {...rest}> - <Link href={href} aria-current={ariaCurrent}> - {children} - </Link> + {href ? ( + <Link href={href} aria-current={ariaCurrent}> + {children} + </Link> + ) : ( + <span className={`${prefix}--link`}>{children}</span> + )} </li> ); }