Breadcrumbs

Enhances user experience by visually representing path within system hierarchy, facilitating easy backward traversal. The LmnBreadcrumbsComponent displays a hierarchical navigation path, allowing users to understand their current location within the application structure and navigate back to previous levels. It automatically adjusts the number of visible breadcrumbs based on the available width and collapses excess links into a dropdown menu.

Technical Overview

The lmn-breadcrumbs component renders a list of links representing the navigation path. It intelligently manages the display of these links based on screen size, collapsing less relevant links into a menu to save space. It also provides optional features like a back button and customization options.

Key Features

• Responsive Design: Automatically adjusts the number of visible breadcrumbs based on predefined width zones (lg, md, sm). The thresholds for each zone are configurable. The default value are:
  • SM: Up to 3 items
  • MD: Up to 4 items
  • LG: Up to 6 items
• Collapsible Menu: Older path segments are collapsed into a dropdown menu (lmn-menu) when the number of items exceeds the threshold for the current width zone.
• Back Button: It is optional to include a back button, which enables users to navigate up one level in the hierarchy. It is possible to show this button also when some of the levels are hidden inside of the menu. This button is not shown when the user is on the homepage/root.
• Customizable Links: Supports custom templates for rendering individual breadcrumb links using the lmnBreadcrumbsCustomLink directive.
• Custom Start Slot: Allows injecting custom content at the beginning of the breadcrumbs trail using the lmnBreadcrumbsCustomSlotStart directive.
• Accessibility Support: Implements ARIA attributes, including role="navigation", aria-label for the list, and aria-current for the last item, enhancing screen reader compatibility. aria-current can be configured.
• Negative State: Supports a negative state for display on dark backgrounds.
• Multiline: When the viewport doesn’t allow the path to fit in a single row, the text automatically wrap into multiple lines.

When to Use

Use the LmnBreadcrumbsComponent when:

• You need to show the user's current location within a hierarchical navigation structure.
• You want to provide users with easy access to navigate back to parent pages or sections.
• The navigation path can become long and needs responsive handling for different screen sizes.

Implementation

To implement the breadcrumbs component, you need to:

1. Include the <lmn-breadcrumbs> tag in your template.
2. Provide the required inputs.

Selector: lmn-breadcrumbs

Inputs:

• items: Required. An array of LmnBreadcrumbsLink objects representing the navigation path. Each link object should have id, label (string or Signal<string>), and url. An optional ariaLabel (string or Signal<string>) can be provided for accessibility.
• listName: Required. A string or Signal<string> used as the aria-label for the breadcrumbs list (<ul>).
• hideBackButton: Optional (boolean, default: false). Hides the back button if set to true.
• negative: Optional (boolean, default: false). Applies negative styling for dark backgrounds.
• ariaCurrent: Optional (LmnBreadcrumbsAriaCurrentRole, default: 'page'). Sets the aria-current attribute value for the last breadcrumb item.
• visibleElementThresholds: Optional (Partial<Record<LmnWidthZone, number>>, default: { lg: 6, md: 4, sm: 3 }). Overrides the default maximum number of visible breadcrumbs for different width zones (lg, md, sm).

Outputs:

• triggerLink: Emits LmnBreadcrumbsLinkTriggerEvent when a breadcrumb link is clicked or activated via keyboard. The event includes the original Event and the LmnBreadcrumbsLink object. Note: The component calls event.preventDefault() internally.
• triggerListItem: Emits LmnListItemTriggerEvent when an item in the collapsed menu is clicked.
• triggerBackButton: Emits the original Event when the back button is clicked.

Customization:

• Custom Link Template: Provide a template using the LmnBreadcrumbsCustomLinkDirective structural directive to customize the rendering of each link. The template context provides the LmnBreadcrumbsLink object implicitly ($implicit).

• Custom Start Slot: Add content before the breadcrumb items using the lmnBreadcrumbsCustomSlotStart attribute directive.