diff --git a/README.md b/README.md
index 3ba2ee1..403cb51 100644
--- a/README.md
+++ b/README.md
@@ -56,6 +56,9 @@ registerBreadcrumbHelper()
 
 // Add breadcrumbs to res.render
 res.render(breadcrumbsPath: [{url: 'https://kth.se', label: 'KTH'}, ...], ...)
+
+// Import the needed css from @kth/style
+@use '@kth/style/scss/components/breadcrumbs.scss';
 ```
 
 ## Language Link Helper
diff --git a/lib/handlebars/helpers/__snapshots__/breadcrumbs.test.js.snap b/lib/handlebars/helpers/__snapshots__/breadcrumbs.test.js.snap
index 0e27852..a3c2d3c 100644
--- a/lib/handlebars/helpers/__snapshots__/breadcrumbs.test.js.snap
+++ b/lib/handlebars/helpers/__snapshots__/breadcrumbs.test.js.snap
@@ -2,9 +2,9 @@
 
 exports[`getBreadcrumbsMarkup should generate breadcrumbs HTML for a valid path list in English 1`] = `
 "
-  <nav id="breadcrumbs" aria-label="Breadcrumbs" class="col-12 col-md-9">
-    <ol class="breadcrumb">
-      <li class="breadcrumb-item"><a href="/">Kth</a></li><li class="breadcrumb-item"><a href="/test1">Test 1</a></li><li class="breadcrumb-item"><a href="/test2">Test 2</a></li>
+  <nav id="breadcrumbs" aria-label="Breadcrumbs" class="kth-breadcrumbs">
+    <ol class="kth-breadcrumbs__list">
+      <li><a href="/">Kth</a></li><li><a href="/test1">Test 1</a></li><li><a href="/test2">Test 2</a></li>
     </ol>
   </nav>
 "
@@ -12,9 +12,9 @@ exports[`getBreadcrumbsMarkup should generate breadcrumbs HTML for a valid path
 
 exports[`getBreadcrumbsMarkup should generate breadcrumbs HTML for a valid path list in Swedish 1`] = `
 "
-  <nav id="breadcrumbs" aria-label="Brödsmulor" class="col-12 col-md-9">
-    <ol class="breadcrumb">
-      <li class="breadcrumb-item"><a href="/">Kth</a></li><li class="breadcrumb-item"><a href="/test1">Test 1</a></li><li class="breadcrumb-item"><a href="/test2">Test 2</a></li>
+  <nav id="breadcrumbs" aria-label="Brödsmulor" class="kth-breadcrumbs">
+    <ol class="kth-breadcrumbs__list">
+      <li><a href="/">Kth</a></li><li><a href="/test1">Test 1</a></li><li><a href="/test2">Test 2</a></li>
     </ol>
   </nav>
 "
diff --git a/lib/handlebars/helpers/breadcrumbs.js b/lib/handlebars/helpers/breadcrumbs.js
index e758bbc..8b48788 100644
--- a/lib/handlebars/helpers/breadcrumbs.js
+++ b/lib/handlebars/helpers/breadcrumbs.js
@@ -24,9 +24,9 @@ function getBreadcrumbsMarkup(pathList, lang) {
   const ariaLabel = /^sv/.test(lang) ? 'Brödsmulor' : 'Breadcrumbs'
 
   const output = `
-  <nav id="breadcrumbs" aria-label="${ariaLabel}" class="col-12 col-md-9">
-    <ol class="breadcrumb">
-      ${listItems.reduce((items, item) => items + `<li class="breadcrumb-item">${item}</li>`, '')}
+  <nav id="breadcrumbs" aria-label="${ariaLabel}" class="kth-breadcrumbs">
+    <ol class="kth-breadcrumbs__list">
+      ${listItems.reduce((items, item) => items + `<li>${item}</li>`, '')}
     </ol>
   </nav>
 `.replace(/,/g, '')