AWE Breadcrumbs Component

The <awe-breadcrumbs> component is a navigation aid that helps users understand their current location within a website or application hierarchy and provides easy navigation to previous levels.

Basic Usage

The basic usage of the breadcrumbs component involves passing an array of breadcrumb items with labels, URLs, and active states.

<awe-breadcrumbs breadcrumbs="breadcrumbs"></awe-breadcrumbs>

breadcrumbs = [
  { label: 'Home', url: '/home', active: false },
  { label: 'Products', url: '/products', active: false },
  { label: 'Electronics', url: '/products/electronics', active: true }
];

Structure and Navigation

Breadcrumbs display a hierarchical path, showing where the user currently is and how they got there. Each breadcrumb except the last one is a clickable link that allows navigation to the corresponding level.

Breadcrumb Structure

Home > Products > Electronics

• The first item usually represents the home or starting page
• Intermediate items represent categories or sections
• The last item represents the current page (typically not clickable)

Events

The breadcrumbs component tracks click events and breadcrumb navigation.

Handling Breadcrumb Clicks

<awe-breadcrumbs 
  breadcrumbs="breadcrumbs"
  on:breadcrumbClick="onBreadcrumbClick($event)">
</awe-breadcrumbs>

// The breadcrumbs component tracks the clickedBreadcrumbIndex internally
clickedBreadcrumbIndex: number | null = null;

// You can also handle click events in your component
onBreadcrumbClick(index: number): void {
  console.log(`Breadcrumb clicked: ${this.breadcrumbs[index].label}`);
  // Additional functionality...
}

Custom Usage Scenarios

Breadcrumbs can be applied in various contexts to enhance navigation.

E-commerce

For product category navigation:

ecommerceBreadcrumbs = [
  { label: 'Shop', url: '/shop', active: false },
  { label: 'Women', url: '/shop/women', active: false },
  { label: 'Clothing', url: '/shop/women/clothing', active: false },
  { label: 'Dresses', url: '/shop/women/clothing/dresses', active: true }
];

Documentation Sites

For documentation navigation:

documentationBreadcrumbs = [
  { label: 'Documentation', url: '/docs', active: false },
  { label: 'API Reference', url: '/docs/api', active: false },
  { label: 'Components', url: '/docs/api/components', active: false },
  { label: 'Breadcrumbs', url: '/docs/api/components/breadcrumbs', active: true }
];

Dashboard Applications

For settings and admin navigation:

dashboardBreadcrumbs = [
  { label: 'Dashboard', url: '/dashboard', active: false },
  { label: 'Settings', url: '/dashboard/settings', active: false },
  { label: 'Account', url: '/dashboard/settings/account', active: true }
];

Accessibility

The breadcrumbs component follows accessibility best practices:

• Uses proper ARIA attributes for navigation landmarks
• Provides keyboard navigation support (arrow keys, Enter)
• Uses semantically correct HTML elements for navigation
• Maintains focus states for keyboard navigation

Keyboard Navigation

• Right Arrow: Move to the next breadcrumb
• Left Arrow: Move to the previous breadcrumb
• Enter/Space: Activate the focused breadcrumb

API Reference

Inputs

Input	Type	Default	Description
breadcrumbs	{ label: string, url: string, active: boolean }[]	[]	Array of breadcrumb items to display

Properties

Property	Type	Description
clickedBreadcrumbIndex	number | null	Index of the clicked breadcrumb (null if none clicked)
displayedBreadcrumbs	Array	Array of breadcrumbs to display based on current state

Methods

Method	Parameters	Return Type	Description
onBreadcrumbClick	index: number	void	Handles breadcrumb click events
onBreadcrumbKeydown	event: KeyboardEvent, index: number	void	Handles keyboard events for accessibility

Customization

You can customize the breadcrumbs component through CSS variables:

awe-breadcrumbs {
  /* Customize colors */
  --text-body: #333333;
  --button-links-success: #28a745;
  --icons-success: #28a745;
  
  /* Customize spacing */
  --spacing-2x: 8px;
  --spacing-4x: 16px;
  --spacing-5x: 20px;
  
  /* Customize typography */
  --font-font-weight-regular: 400;
}

Best Practices

• Keep it Simple: Limit the number of levels to 3-5 to avoid overwhelming users
• Consistent Placement: Position breadcrumbs at the top of the page, typically below the header
• Clear Labels: Use concise, descriptive labels for each level
• Visual Hierarchy: Ensure the breadcrumbs are visually distinct from main content but not too prominent
• Use with Other Navigation: Breadcrumbs should complement, not replace, primary navigation methods
• Current Location: Clearly indicate the current page in the breadcrumb trail
• Responsive Design: Ensure breadcrumbs work well on all device sizes (consider collapsing on mobile)
• URL Structure: Align breadcrumb hierarchy with your URL structure for consistency