Blaze UI Breadcrumbs
Blaze UI Breadcrumbs is used to show the navigation route on our website. We can use these breadcrumbs when we want to show the route to the user so that the user can easily understand the flow. In this article, we will discuss Blaze UI Breadcrumbs.
Blaze UI Breadcrumbs tags:
- blaze-breadcrumbs: This tag is used to create the breadcrumbs in Blaze UI.
- blaze-breadcrumb: This tag is used to create a single item in the breadcrumb.
Blaze UI Breadcrumbs Classes:
- c-breadcrumbs: This class is used to create breadcrumbs.
- c-breadcrumbs__crumb: This class is used to create the item in breadcrumbs.
Syntax: Using Breadcrumbs Tags
<blaze-breadcrumbs aria-label="Breadcrumbs"> <blaze-breadcrumb href="/"> ... </blaze-breadcrumb> ... </blaze-breadcrumbs>
Syntax: Using Breadcrumbs CSS classes
<nav aria-label="Breadcrumb"> <ol class="c-breadcrumbs"> <li class="c-breadcrumbs__crumb"> <a class="c-link">...</a> </li> ... </ol> </nav>
Example 1: The following code demonstrates the Blaze UI Breadcrumbs using Breadcrumbs Tags.
Example 2: The following code demonstrates the Blaze UI Breadcrumbs using Breadcrumbs CSS classes.