diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html
index e3ffb7f..39cac2d 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html
+++ b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html
@@ -7,12 +7,7 @@
 
   <msfa-sidebar class="msfa__sidebar" [userRoles]="roles$ | async"></msfa-sidebar>
   <main id="msfa-main-content" class="msfa__content">
-    <digi-ng-navigation-breadcrumbs
-      *ngIf="showBreadCrumbs"
-      class="msfa__breadcrumbs"
-      [afItems]="breadcrumbsItems"
-    ></digi-ng-navigation-breadcrumbs>
-
+    <ui-breadcrumbs *ngIf="showBreadCrumbs" class="msfa__breadcrumbs" [uiItems]="breadcrumbsItems"></ui-breadcrumbs>
     <ng-content></ng-content>
   </main>
 
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.module.ts b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.module.ts
index d16bb8e..d8fea45 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.module.ts
+++ b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.module.ts
@@ -1,9 +1,9 @@
-import { DigiNgNavigationBreadcrumbsModule } from '@af/digi-ng/_navigation/navigation-breadcrumbs';
 import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { UiLoaderModule } from '@ui/loader/loader.module';
+import { UiBreadcrumbsModule } from '@ui/breadcrumbs/breadcrumbs.module';
 import { MarkdownModule } from 'ngx-markdown';
 import { FooterModule } from './components/footer/footer.module';
 import { NavigationModule } from './components/navigation/navigation.module';
@@ -22,8 +22,8 @@ import { LayoutComponent } from './layout.component';
     SidebarModule,
     FooterModule,
     MarkdownModule.forRoot({ loader: HttpClient }),
-    DigiNgNavigationBreadcrumbsModule,
     UiLoaderModule,
+    UiBreadcrumbsModule,
   ],
   exports: [LayoutComponent],
 })
diff --git a/libs/ui/src/breadcrumbs/breadcrumbs-item.model.ts b/libs/ui/src/breadcrumbs/breadcrumbs-item.model.ts
new file mode 100644
index 0000000..b83c092
--- /dev/null
+++ b/libs/ui/src/breadcrumbs/breadcrumbs-item.model.ts
@@ -0,0 +1,5 @@
+export interface BreadcrumbsItem {
+  text: string;
+  href?: string;
+  routerLink?: string;
+}
diff --git a/libs/ui/src/breadcrumbs/breadcrumbs-link-target.enum.ts b/libs/ui/src/breadcrumbs/breadcrumbs-link-target.enum.ts
new file mode 100644
index 0000000..85c47ef
--- /dev/null
+++ b/libs/ui/src/breadcrumbs/breadcrumbs-link-target.enum.ts
@@ -0,0 +1,4 @@
+export enum BreadcrumbsLinkTarget {
+  SELF = '_self',
+  BLANK = '_blank',
+}
diff --git a/libs/ui/src/breadcrumbs/breadcrumbs.component.html b/libs/ui/src/breadcrumbs/breadcrumbs.component.html
new file mode 100644
index 0000000..17b8c75
--- /dev/null
+++ b/libs/ui/src/breadcrumbs/breadcrumbs.component.html
@@ -0,0 +1,27 @@
+<nav class="ui-breadcrumbs" [attr.aria-label]="uiAriaLabel" data-digi-ng-component>
+  <ol class="ui-breadcrumbs__items">
+    <li class="ui-breadcrumbs__item" *ngFor="let item of parents">
+      <a
+        *ngIf="item.routerLink"
+        class="ui-breadcrumbs__link"
+        [routerLink]="item.routerLink"
+        [queryParams]="uiQueryParams"
+        [queryParamsHandling]="uiQueryParamsHandling"
+      >
+        {{ item.text }}
+      </a>
+      <a
+        *ngIf="!item.routerLink"
+        class="ui-breadcrumbs__link"
+        [attr.rel]="rel"
+        [attr.type]="uiType"
+        [attr.download]="uiDownload"
+        [attr.target]="uiTarget"
+        [href]="uiHref"
+      >
+        {{ item.text }}
+      </a>
+    </li>
+    <li class="ui-breadcrumbs__item" aria-current="page">{{ currentItem.text }}</li>
+  </ol>
+</nav>
diff --git a/libs/ui/src/breadcrumbs/breadcrumbs.component.scss b/libs/ui/src/breadcrumbs/breadcrumbs.component.scss
new file mode 100644
index 0000000..b49cce4
--- /dev/null
+++ b/libs/ui/src/breadcrumbs/breadcrumbs.component.scss
@@ -0,0 +1,28 @@
+.ui-breadcrumbs {
+  &__items {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__item {
+    font-family: var(--digi--typography--font-family);
+    font-size: var(--digi--typography--font-size--xs);
+    color: var(--digi--typography--color--text);
+
+    &:not(:last-child) {
+      padding-right: var(--digi--layout--padding--10);
+
+      &::after {
+        content: '/';
+        padding-left: var(--digi--layout--padding--10);
+      }
+    }
+  }
+
+  &__link {
+    text-decoration: none;
+  }
+}
diff --git a/libs/ui/src/breadcrumbs/breadcrumbs.component.spec.ts b/libs/ui/src/breadcrumbs/breadcrumbs.component.spec.ts
new file mode 100644
index 0000000..919763b
--- /dev/null
+++ b/libs/ui/src/breadcrumbs/breadcrumbs.component.spec.ts
@@ -0,0 +1,10 @@
+/* tslint:disable:no-unused-variable */
+import { BreadcrumbsComponent } from './breadcrumbs.component';
+
+describe('BreadcrumbsComponent', () => {
+  let component: BreadcrumbsComponent;
+  it('should create', () => {
+    component = new BreadcrumbsComponent();
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/libs/ui/src/breadcrumbs/breadcrumbs.component.stories.ts b/libs/ui/src/breadcrumbs/breadcrumbs.component.stories.ts
new file mode 100644
index 0000000..a2639a5
--- /dev/null
+++ b/libs/ui/src/breadcrumbs/breadcrumbs.component.stories.ts
@@ -0,0 +1,41 @@
+import { BreadcrumbsComponent } from './breadcrumbs.component';
+import { UiBreadcrumbsModule } from './breadcrumbs.module';
+import { BreadcrumbsItem } from './breadcrumbs-item.model';
+
+export default { title: 'Breadcrumbs', component: BreadcrumbsComponent };
+
+const componentModule = {
+  moduleMetadata: {
+    declarations: [],
+    imports: [UiBreadcrumbsModule],
+  },
+};
+
+const items: BreadcrumbsItem[] = [
+  {
+    text: 'Start',
+    href: '/',
+  },
+  {
+    text: 'Sub-page 1',
+    href: '#',
+  },
+  {
+    text: 'Sub-page 2',
+    href: '#',
+  },
+  {
+    text: 'Current page',
+    href: 'i-will-not-be-used-because-i-am-the-last-item',
+  },
+];
+
+export const standard = () => ({
+  ...componentModule,
+  template: `
+    <ui-breadcrumbs [uiItems]="items"></ui-breadcrumbs>
+  `,
+  props: {
+    items,
+  },
+});
diff --git a/libs/ui/src/breadcrumbs/breadcrumbs.component.ts b/libs/ui/src/breadcrumbs/breadcrumbs.component.ts
new file mode 100644
index 0000000..9cfc566
--- /dev/null
+++ b/libs/ui/src/breadcrumbs/breadcrumbs.component.ts
@@ -0,0 +1,80 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { BreadcrumbsItem } from './breadcrumbs-item.model';
+import { BreadcrumbsLinkTarget } from './breadcrumbs-link-target.enum';
+/**
+ * This is a breadcrumbs component. Provide an array of BreadcrumbsItem and it will create a list of links.
+ * If the BreadcrumbsItem contains both href and routerLink, the routerLink takes presedence.
+ */
+@Component({
+  selector: 'ui-breadcrumbs',
+  templateUrl: './breadcrumbs.component.html',
+  styleUrls: ['./breadcrumbs.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BreadcrumbsComponent {
+  /**
+   * A list of navigation items.
+   */
+  @Input() uiItems: BreadcrumbsItem[] = [];
+
+  /**
+   * An optional aria-label for the nav element. Defaults to 'breadcrumbs'.
+   */
+  @Input() uiAriaLabel: string = 'breadcrumbs';
+
+  /**
+   * The element's target attribute. If target is BreadcrumbsLinkTarget.BLANK, the component will add necessary rel attribute
+   * for security reasons.
+   */
+  @Input() uiTarget?: BreadcrumbsLinkTarget;
+
+  /**
+   * Optional download attribute
+   */
+  @Input() uiDownload?: boolean | string;
+
+  /**
+   * Optional type attribute
+   */
+  @Input() uiType?: string;
+
+  /**
+   * A href string.
+   */
+  @Input() uiHref: string = ' ';
+
+  /**
+   * Optional rel attribute
+   */
+  @Input() uiRel?: string;
+
+  /**
+   * Angular router queryParams. F.e. `{ lorem: "ipsum" }`
+   */
+  @Input() uiQueryParams?: { [key: string]: string };
+
+  /**
+   * How to handle query parameters in a router link. One of:
+   * - merge : Merge new with current parameters.
+   * - preserve : Preserve current parameters.
+   */
+  @Input() uiQueryParamsHandling: 'merge' | 'preserve' = 'merge';
+
+  get parents(): BreadcrumbsItem[] {
+    return this.uiItems.slice(0, this.uiItems.length - 1);
+  }
+
+  get currentItem(): BreadcrumbsItem {
+    return this.uiItems[this.uiItems.length - 1];
+  }
+
+  get rel() {
+    if (this.uiTarget === BreadcrumbsLinkTarget.BLANK) {
+      return 'noopener noreferrer';
+    } else if (this.uiRel) {
+      return this.uiRel;
+    } else {
+      return null;
+    }
+  }
+}
diff --git a/libs/ui/src/breadcrumbs/breadcrumbs.module.ts b/libs/ui/src/breadcrumbs/breadcrumbs.module.ts
new file mode 100644
index 0000000..c9338a7
--- /dev/null
+++ b/libs/ui/src/breadcrumbs/breadcrumbs.module.ts
@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { BreadcrumbsComponent } from './breadcrumbs.component';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [CommonModule, RouterModule],
+  declarations: [BreadcrumbsComponent],
+  exports: [BreadcrumbsComponent],
+})
+export class UiBreadcrumbsModule {}