Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Image Designer
Kanban Board
PDF Viewer
Video Player
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Buy License

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.

PropTypeDefault
dataSource
The data source to be used for the breadcrumbs.
T[][]
lastItemAsLink
Whether the last item should be displayed as a link.
booleanfalse
separator
Separator between breadcrumb items.
string/