Custom Breadcrumbs for Bootstrap 5 framework
Abstract: We are presenting code (CSS) for custom Bootstrap 5 breadcrumbs. This is an improved version of the previously published article.
1. The need for better Breadcrumbs
Bootstrap 5 framework is coming with very basic Breadcrumbs implementation. I needed something much better, both visually and more functional. Over time, in my applications, I found it very useful to use Breadcrumbs to enable the user to go back to the higher level after he drills into details on the particular item/object.
Very important to me was the ability to present TEXT DATA IN TWO ROWS, especially in cases where I am showing some data and ID, like an indication that is the data for some Account, and at the same time providing the Account number.
I was not satisfied with the solutions I saw on the internet, so I developed my own.
While the title says this is a “ Bootstrap 5” library, it is completely independent of the Bootstrap CSS, and only chosen colors were taken from the Bootstrap CSS to align with the Bootstrap 5 theme. You can use it independently from Bootstrap if you like.
1.1. Changes in this version
This version incorporates suggestions and code from Graeme_Grant@codeproject.com to make the code shorter. I do not necessarily agree with all the suggestions because I think code human readability is more important than shorter code. So, I made my own new version.
Also, this version uses Bootstrap Icons [1] instead of Font Awesome Icons.
2. Final result
Here is what the final result looks like, together with the demo code that generates it. I created breadcrumbs strips in 3 sizes (large, medium, small), with optional usage of icons. Colors can be chosen at will, and the hover effect is present by default unless explicitly disabled. The hover effect is usually disabled for the last breadcrumb because that is the current selection in effect.
![Final Result]()
Here is the HTML code that generates the above rendering. Any web developer should be able to read the HTML code and match it to the above picture to find the variant he/she likes.
If you want to use icons, you can install the free version of Bootstrap Icons [1] and refer to it, similar to how it is done in this example. HTML code for icon usage is a bit complicated because we needed to separate icons and text into 2 separate elements so they could be styled independently.
3. Breadcrumbs CSS
Here is the CSS. No JavaScript is needed. I deliberately used the class name “breadcrumbs3” to avoid name collision with the Bootstrap 5 original class.
4. How CSS works?
Here, we will give some hints on how CSS works, although this is pretty simple CSS code and mostly is self-explanatory.
4.1. Trick to make triangles with CSS
A very popular trick on how to make triangles with CSS is used here. The point is to abuse CSS's ability to render borders and make it render a border that is of the shape of a triangle. You do that by creating a block element with zero width and height, a colored border on one side that acts as an arrow, and two transparent borders on two adjacent sides.
4.2. Trick to create a border to the CSS triangle
Since the triangle itself is a border, we can not create a border on it. So, the trick to create a border on the triangle/arrow is to create 2 triangles and render one over the other with minimal offset aside. That way we create the border appearance.
You can look into CSS code into selectors (.breadcrumb3-item: after) and (.breadcrumb3-item: before), and you will see that we there create 2 triangles, one gray and one info-color over it. Look carefully into CSS rules for the first (margin-left: 1px; z-index: 2;) and for the second (margin-left: 0px; z-index: 3;). You can see a slight offset and rendering of the second triangle over the first one.
Pseudo-elements (: before and after) have just the purpose of attaching those triangles to the .breadcrumb3-item element.
4.3. Tutorial Example
Here, we will provide a tutorial example code to show how triangles are created. Here is a tutorial code.
Here is the result of the execution.
![Border]()
Any better programmer should be able to match code samples to produce results.
5. Bootstrap Icons usage
It might look complicated to find the proper Bootstrap Icons icon for your application but is really pretty easy. Icons are indexed by keywords, so you need to search for your keyword first, then choose (in this example free) the icon of interest, and then copy its ID- class into your app. Here are screenshots showing that process.
![User]()
![Download]()
6. References
[1] https://icons.getbootstrap.com/#install