diff --git a/packages/core/src/components/breadcrumbs/breadcrumb/breadcrumb.scss b/packages/core/src/components/breadcrumbs/breadcrumb/breadcrumb.scss
index a49688d7a..85c712792 100644
--- a/packages/core/src/components/breadcrumbs/breadcrumb/breadcrumb.scss
+++ b/packages/core/src/components/breadcrumbs/breadcrumb/breadcrumb.scss
@@ -13,8 +13,11 @@
     }
   }
 
-  &:focus-visible {
+  ::slotted(*:focus-visible) {
     @include tds-focus-state;
+
+    // Overrides the offset of the tds-focus-state to align with design.
+    outline-offset: -0;
   }
 
   &.current,
@@ -33,7 +36,7 @@
     }
   }
 
-  ::slotted(*)::after {
+  &::after {
     content: '\203A';
     color: var(--tds-breadcrumb-separator-color);
     margin-right: 4px;
@@ -44,8 +47,8 @@
   }
 }
 
-:host(:last-of-type) {
-  ::slotted(*)::after {
+:host(.last) [role='listitem'] {
+  &::after {
     display: none;
   }
 }
diff --git a/packages/core/src/components/breadcrumbs/breadcrumbs.tsx b/packages/core/src/components/breadcrumbs/breadcrumbs.tsx
index 01c39abd9..783017b15 100644
--- a/packages/core/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/packages/core/src/components/breadcrumbs/breadcrumbs.tsx
@@ -9,9 +9,10 @@ import { Component, h, Element } from '@stencil/core';
   shadow: true,
 })
 export class TdsBreadcrumbs {
-  @Element() el: HTMLElement;
+  @Element() host: HTMLElement;
 
   render() {
+    this.host.children[this.host.children.length - 1]?.classList.add('last');
     return (
       <nav>
         <div role="list" class={'tds-breadcrumb'}>