diff --git a/packages/css/src/components/breadcrumb/breadcrumb.scss b/packages/css/src/components/breadcrumb/breadcrumb.scss
index 5264180fe3..ca63dfa8bb 100644
--- a/packages/css/src/components/breadcrumb/breadcrumb.scss
+++ b/packages/css/src/components/breadcrumb/breadcrumb.scss
@@ -25,27 +25,22 @@
.amsterdam-breadcrumb__list {
break-after: avoid;
break-inside: avoid;
- display: flex;
- flex-wrap: wrap;
- gap: 0.5rem;
- list-style: none;
@include reset;
}
.amsterdam-breadcrumb__item {
- align-items: center;
- display: flex;
+ display: inline;
}
.amsterdam-breadcrumb__item:not(:last-child)::after {
- background-color: var(--amsterdam-breadcrumb-separator-background-color);
- clip-path: path("M 4.725,16 3.275,14.545 9.815,8 3.275,1.455 4.725,0 l 8,8 z");
+ background-image: var(--amsterdam-breadcrumb-separator-background-image);
+ background-repeat: no-repeat;
content: "";
display: inline-block;
- height: 1rem;
- margin-inline-start: 1rem;
- width: 1rem;
+ height: 1ex;
+ margin-inline: 0.5rem;
+ width: 1ex;
}
.amsterdam-breadcrumb__link {
@@ -55,10 +50,6 @@
text-decoration-thickness: var(--amsterdam-breadcrumb-item-link-text-decoration-thickness);
text-underline-offset: var(--amsterdam-breadcrumb-item-link-text-underline-offset);
- &::first-letter {
- text-transform: capitalize;
- }
-
&:hover {
color: var(--amsterdam-breadcrumb-item-link-hover-color);
text-decoration-line: var(--amsterdam-breadcrumb-item-link-hover-text-decoration-line);
diff --git a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json
index e36911e812..d006844a5c 100644
--- a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json
@@ -4,7 +4,9 @@
"font-family": { "value": "{amsterdam.typography.font-family}" },
"font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
"separator": {
- "background-color": { "value": "{amsterdam.color.primary-blue}" }
+ "background-image": {
+ "value": "url(\"data:image/svg+xml;utf8,\")"
+ }
},
"item-link": {
"color": { "value": "{amsterdam.link-appearance.color}" },
diff --git a/storybook/storybook-react/src/Breadcrumb/Breadcrumb.stories.tsx b/storybook/storybook-react/src/Breadcrumb/Breadcrumb.stories.tsx
index 4e26cbe324..def3a61140 100644
--- a/storybook/storybook-react/src/Breadcrumb/Breadcrumb.stories.tsx
+++ b/storybook/storybook-react/src/Breadcrumb/Breadcrumb.stories.tsx
@@ -15,14 +15,12 @@ export default meta
type Story = StoryObj
-export const BreadcrumbStory: Story = {
+export const Default: Story = {
render: () => (
- home
- path 1
- path 2
- path 3
- path 5
+ Home
+ Nieuws
+ Kennisgevingen en bekendmakingen
),
parameters: {
@@ -31,11 +29,9 @@ export const BreadcrumbStory: Story = {
language: 'jsx',
code: `
- home
- path 1
- path 2
- path 3
- path 5
+ Home
+ Nieuws
+ Kennisgevingen en bekendmakingen
`,
},