How to add bread crumbs navigation in Bootstrap

This article mainly explains "how to add bread crumbs navigation in Bootstrap". The explanation in the article is simple and clear, easy to learn and understand. Please follow the editor's train of thought to study and learn "how to add bread crumbs navigation in Bootstrap".

1 breadcrumb navigation

Breadcrumb navigation is generally used under the navigation bar at the top of the site to indicate the hierarchy of the current page in the navigation hierarchy, usually with > or | and space intervals. Bootstrap5 breadcrumb navigation automatically adds delimiters through CSS.

Example

Bread crumbs demonstration

Home news domestic news 2 custom delimiter 2.1 by modifying local CSS custom properties

In the following code, you can use > as a split symbol and change it to any other character by adding a style= "--bs-breadcrumb-divider:'>';".

Bread crumbs demonstration

Home page news home page domestic news home page news home page News 2.2 use icons or pictures

The embedded SVG icon can also be used in the above example.

Home news domestic news 2.3 does not use delimiters

You can also delete the delimiter setting-- bs-breadcrumb-divider:''; (the empty string in the CSS custom property counts as a value).

Home news domestic news thank you for reading, the above is the content of "how to add bread crumbs navigation in Bootstrap". After the study of this article, I believe you have a deeper understanding of how to add bread crumbs navigation in Bootstrap, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!