Anatomy

Each element in the breadcrumb is a clickable button link (except the active state).
Separator is used to separate each level in the breadcrumb.
Indicates which page it is currently on and cannot be clicked on.

States

Active State

In the breadcrumb, the Active State cannot be clicked because it indicates that the user is currently on that page

Hover State

When the cursor hovers over a breadcrumb, its state is activated to create an animation effect. This effect includes increasing the color value by one step, such as from 500 to 600 in the color style, and adding an underline to the text.

Default State

The default breadcrumb has a Primary500 color, indicating that it is clickable and navigates to a specific page.

Usage

The following are some common uses for the breadcrumbs component in web and application design:

• Display a hierarchy of pages with a structure of more than two levels.
• Facilitate navigation back to the previous page or to a higher hierarchy level.
• Improve user experience especially in applications or websites with complex structures.

Placement of breadcrumbs at the top of the page helps improve navigability and overall user experience.

Accessibility

Hover Effects

Provide clear visual feedback when users use the pointer or keyboard on the breadcrumb.

Content

Each link in the breadcrumb above should point to a unique page. Users should be able to click on each breadcrumb section to go directly to the corresponding page, such as the Home page, Product Category page, and so on. Because the "Culture" page does not have a separate page so it does not need to be written in breadcrumbs

Separators in breadcrumbs are used to distinguish between each page.

Writing labels on breadcrumbs must be short and clear and in accordance with the intended page.