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

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/