Depending on how complex your app is, you may want to include the Breadcrumb component to show users where they are and how they got there.
For example, in the Applicant Tracker below, the Breadcrumb component shows that the current page is called Cameron Williamson and that the user got to this page from the Applicants screen.
The Breadcrumb menu can also be used as navigation. Clicking on Applicants will take the user back to that screen.
The breadcrumb menu is a very common navigation tool in websites, especially complex ones where you can get to the same page from different locations. For example, in the image below you can see the same screen as above, but the user got to that screen via the Pipeline tab.
Adding and Configuration
Ideally, the Breadcrumb component will be in the same place on every screen in your app—that way it will act as a consistent navigation item that users can rely on—just like the navigation menu. However, it's fine not to have it on the top level of your tabs.
This means that you will need to add it to every screen manually.
The Breadcrumb component itself does not have any configuration. It just shows the screen titles as a path. For example, below, the user is on the Schedule tab. This is because the title of that tab is called Schedule. If you changed the title of that tab to "Elephants" or "Cars"—the Breadcrumb component would update.
When a user visits a different page of a collection, the breadcrumb component will keep the name of the screen they came from and then show a second value for the current page. For example, here you see the word Ralph Edwards after Pipeline because that is the title of the page the user is now on.
If you want the component to display a different value, you can change the value for what appears in the breadcrumb as the title of that page. For example, in the image below, the title of the details screen is reading the value from the position name instead of the candidate name.