Learn about the Breadcrumb components: their characteristics, options, and common use.
After reading this article, you’ll know:
-
What the Breadcrumb component is and its major options
-
How to use the Breadcrumb component in your application
-
The difference between the Breadcrumb and other navigation components
What is the Breadcrumb component?
When you are working with nested pages, you can use breadcrumbs to make navigation easier and more consistent. Breadcrumb items reveal the user’s location within an application and enable them to come back to the previous pages.
The component exists out of 2 parts; as a parent item, the Breadcrumbs component, and as a child item, the Breadcrumb component. Together they create a clickthrough menu that allows users to easily navigate between the pages of the application.
Options
Breadcrumbs component
Just like the menu component, you have the option to reconfigure and quickly add items to the breadcrumbs bar. There are also a few unique ones to this component, you can set the max amount of items, and when this option is changed from 'all' to any number, the collapse option toggles, allowing you to set a maximum amount of items before the collapse, and a maximum amount of items after the collapse. Using these will help shorten the breadcrumb bar to prevent filling up your page with breadcrumb items.
You can use the separator type, and color to change the look of the separator to either a sign or an icon from our icon set in any color of your theme builder's color scheme.
Breadcrumb component
Individual Breadcrumb options allow you to change the text, icon and icon position of the breadcrumb component. With the Page option, you can determine to which page a user navigates once they click the breadcrumb.
Using the component
Drag and drop the Breadcrumbs component onto an empty column (usually it is placed in the top left corner of a page, just below the navigation bar) and you will get a simple navigation scheme. By choosing a separate Breadcrumb item, you will be able to set the name, page to be redirected to by clicking, text color, etc. Reconfiguration options are the same as for tabs.
Configure the Breadcrumbs according to your user navigation journey, if you allow a user to navigate from your home page to the project, to a project detail overview, we recommend building the breadcrumbs on your project detail overview like this
-
Breadcrumb 1: Name - Home, and set to navigate to the home page.
-
Breadcrumb 2: Name - Projects, navigates to the project overview.
-
Breadcrumb 3: Name - [Project name], set a dynamic name by using the data of your detail pages' Page variable. From here you can click on every breadcrumb. It should look something like "Home / Projects / [Project name]"
We also advise you to test out different options and see what works best for your application use case.
Breadcrumb vs other navigation components
The Breadcrumbs component is a basic component when it comes to its uses compared to other navigation components.
Most often we see the Breadcrumbs used on the top left corner of a page, below the header. And it folds out once a user has taken their first step in navigating your pages.
Compared to the Tabs and Stepper components the Breadcrumbs component is meant to be used with new pages.
The Breadcrumbs component is a fantastic component to enhance the user experience in their journey through your application. Style it accordingly and it will fit in (almost) every application!