Design adjustments to the breadcrumbs component

[Annikenkbrathen]

Description

Improvements on the breadcrumb component

I can see that our breadcrumb navigation is not very clear, and it's not easy to see how to navigate back and forth. I noticed some guidelines from the design system that we can follow to make the links more visible.

In the breadcrumb navigation it looks like the link to the Utforming homepage is not active because it is in its default state. The design system has a state called "visited," so when users arrive from the homepage, it should have this purple coloring. The colors should also be set to main instead of neutral, so it gets its blue "link" color.

What

Update the breadcrumb to:

• Use the right linked color
• Move underline to the right linked homepage.
• Use Utforming or Forside instead of the app name.

Why

We need to update it to match the design system and enhance the correct logic when we navigate between homepage and other pages.

Additional Information

Additionally, I noticed that I used the underline incorrectly according to the design system guidelines, so we need to change that—sorry about that😰

At the current level, there should be no underline, but the previous levels should have it to indicate that they are links.

Todays design:

New design:

---

Naming on LEVEL 1

In addition to that, we should probably discuss the naming as well. I’ve used the app name in the sketches at this level, but it might make more sense to use "Utforming" since it takes you back to the homepage—or perhaps just "Forside" / "Forside Utforming".

What do you think?

No response

Tasks

No response

Acceptance Criterias

_No response

[Jondyr]

Check if designsystemet v1 changes the styling, if so, upgrade breadcrumbs to studio-components/designsystemet v1