Breadcrumbs are a crucial navigational aid that helps users understand their location within a website. Astral offers a versatile and customizable breadcrumb component that enhances user experience by providing clear, hierarchical navigation paths. The dividers are automatically created in the content of the ::before pseudo-element of li tags. You can inform the current page using the is-active modifier in a li tag. It will disable the navigation of inner links.
Breadcrumb
A simple breadcrumb component to improve your
navigation experience
Example
Alignment
You can use our justify-content-center and justify-content-flex-end to change the alignment of Astral's breadcrumb.
Icons
You can use any of the Font Awesome icons or any other icon with Astral's breadcrumb.