Breadcrumbs Navigation
Hierarchical navigation breadcrumb components
Basic Breadcrumbs
Default Breadcrumbs
Standard breadcrumb navigation without home icon
Well... without items, it's empty 🤷
With Home Icon
Breadcrumbs with home icon at the beginning
Delimiter Variations
Chevron Right (Default)
Standard chevron right delimiter
Chevron Down
Alternative chevron down style
Angle Right
Angle right delimiter style
Caret Right
Caret right delimiter style
Play Icon
Play icon as delimiter
Interactive Configuration
Breadcrumb Builder
Preview
Current Configuration:
<cgg-breadcrumbs
[showHome]="false"
[delimiter]="ICONS.chevronRight" />
[showHome]="false"
[delimiter]="ICONS.chevronRight" />
Usage Guidelines
Best Practices
- • Use breadcrumbs for hierarchical navigation with 3+ levels
- • Keep breadcrumb labels concise and descriptive
- • Always make intermediate levels clickable
- • Consider showing home icon for main navigation
- • Use consistent delimiters throughout your application
Configuration Options
showHome: Display home icon at start
delimiter: Custom separator icon
All FontAwesome icons are supported as delimiters
Real-world Examples
E-commerce Product Navigation
Example of breadcrumbs in an online store
Home > Electronics > Smartphones > iPhone > iPhone 15 Pro
Documentation Site
Navigation through documentation sections
Docs > Components > Navigation > Breadcrumbs > API Reference
Admin Dashboard
Administrative interface navigation
Dashboard > Users > User Management > Edit Profile > John Doe