Breadcrumbs

Breadcrumbs show the user's path inside an application hierarchy. Use them to help users understand where they are and move back to parent levels such as projects, documents, settings sections, folders, or entity detail pages.

Use them for:

Hierarchical pages: Show paths like Home / Projects / Project A / Settings.
Parent navigation: Let users return to higher levels of the current structure.
Object context: Show where an entity, document, folder, or admin page belongs.
Global layout breadcrumbs: Use the breadcrumbs store when the layout should update breadcrumbs dynamically.

Do not use Breadcrumbs as the main app navigation, a tab switcher, a filter list, or a wizard progress indicator. Use Navigation, Sidebar, Sidenav, Tabs, or Stepper for those cases.

The NgStarter Angular Breadcrumbs component lets you show the user's current location in a hierarchy and provide parent navigation. Use in admin sections with nested routes, folders, projects, or record detail pages. It includes examples for Basic breadcrumbs, Breadcrumbs with icons, Breadcrumbs with titles, and Breadcrumbs with datasource.

Basic breadcrumbs

Use basic breadcrumbs to show a simple parent-to-current-page path.

Breadcrumbs with icons

Add icons when each level represents a recognizable area, object type, or section.

Breadcrumbs with titles

Use titles when breadcrumb items need a small type label, such as author, book, chapter, or section.

Breadcrumbs with datasource

Use a data source when breadcrumbs come from route data, an entity hierarchy, or another dynamic model.

Breadcrumbs with last item as link

Enable the last item as a link only when the current item should still be navigable.

Breadcrumbs global (set breadcrumbs dynamically)

Place ngs-breadcrumbs-global in the layout and update it with BreadcrumbsStore when routes or pages need to control breadcrumbs dynamically.