Breadcrumb
A navigation aid that helps users understand their current location within a website or application and allows them to easily navigate back to previous levels.
The key elements that define a Breadcrumb’s structure and function.
- Parent Page: Links to the preceding page or section, helping users navigate back through the hierarchy.
- Current Page: Indicates the user’s current location in the navigation path, typically not clickable.
- Wrapper: A container that holds the breadcrumb trail, ensuring consistent spacing and alignment within the layout.
Hover state
- Trigger area for hover and click action
- Underlined hover state for parents page
Wrapper
- Default without wrapper appearance
- Alternative with wrapper appearance
Limit title length
- Limit Title Length: Set a maximum width of 200px for the current page title. If the title exceeds this length, automatically display an ellipsis (e.g., "Long Page Title...") to maintain a clean and organized layout.