Breadcrumb Features

Egret's breadcrumb system includes the following features:

• Route-based Breadcrumbs: Automatically generated from Angular route configurations
• Dynamic Text: Support for static text or dynamic values from route parameters
• Customizable Styling: Easily theme and style breadcrumbs to match your application
• Hierarchical Navigation: Reflects the nested structure of your routes

Basic Configuration

To configure breadcrumbs, add a data property to your route definitions in your routing files. Here's an example from app.routing.ts:

{
  path: 'dialogs', 
  loadChildren: './views/app-dialogs/app-dialogs.module#AppDialogsModule', 
  data: { title: 'Dialogs', breadcrumb: 'DIALOGS'}
}

The data property contains two important fields:

• title: Sets the page title
• breadcrumb: Sets the text displayed in the breadcrumb for this route

Child Routes Configuration

For child routes, you can define breadcrumbs in a similar way. Here's an example from a child routing file (app-dialogs.routing.ts):

export const DialogsRoutes: Routes = [
  {
    path: '',
    children: [{
      path: 'confirm',
      component: ConfirmDialogComponent,
      data: { title: 'Confirm', breadcrumb: 'CONFIRM' },
    }, {
      path: 'loader',
      component: LoaderDialogComponent,
      data: { title: 'Loader', breadcrumb: 'LOADER' },
    }]
  }
];

Note that the data property is only required for routes with a non-empty path.

Using Route Parameters

You can include route parameters in your breadcrumb text using the {{paramName}} syntax:

[
  {
    path: '',
    children: [{
      path: 'author/:username',
      component: AuthorComponent,
      data: { title: 'Author', breadcrumb: 'Author / {{username}}' },
    }, {
      path: 'book/:bookId',
      component: BookComponent,
      data: { title: 'Book', breadcrumb: 'Book / {{bookId}}' },
    }]
  }
];

In this example:

• For the /author/john route, the breadcrumb will display "Author / john"
• For the /book/123 route, the breadcrumb will display "Book / 123"

The parameter values are automatically extracted from the current route and inserted into the breadcrumb text.

Breadcrumb Guidelines

• Use consistent capitalization (all caps(if you want to translate), title case, etc.)
• Ensure breadcrumb hierarchy matches the logical structure of your application
• Use dynamic parameters sparingly and only when they add meaningful context
• Consider internationalizing breadcrumb text for multi-language applications