Skip to main content

Breadcrumbs Component

This document outlines the specifications for the BreadcrumbsComponent, an Angular component designed to display hierarchical navigation links, typically used to indicate the current page's location within a website or application.

Purpose​

The BreadcrumbsComponent provides users with a visual representation of their current location within a hierarchical structure of pages or sections within a website or application. It enhances user experience by offering contextual navigation aids and allowing users to backtrack through their navigation history easily.

Usage​

Integrate the BreadcrumbsComponent into your Angular applications to display hierarchical navigation links and help users understand their current location within the application's structure.

Inputs​

  1. items: (Required) An array of objects representing the breadcrumb items. Each object should have the following properties:
    • label: (Required) The label or display text for the breadcrumb item.
    • url: (Optional) The URL or route link associated with the breadcrumb item. If not provided, the item is treated as a non-clickable text label.

Example​

<app-breadcrumbs [items]="breadcrumbItems"></app-breadcrumbs>
// Example breadcrumb items
breadcrumbItems = [
  { label: "Home", url: "/" },
  { label: "Products", url: "/products" },
  { label: "Category", url: "/products/category" },
  { label: "Current Page" },
];

Notes​

  • Customize the styling and layout of the breadcrumbs component to align with the overall design language and branding of your application.
  • Ensure that each breadcrumb item's label accurately reflects the corresponding page or section within the application's hierarchical structure.
  • Implement routing functionality for clickable breadcrumb items by providing valid URLs or route links in the items array.