Breadcrumbs have been used since the time of Hansel and Gretal so people can find their way back from whence they came. Luckily, web bread crumbs work better than the ones that Hansel laid down.
Basically, it is a way for users to see how deep in the web site’s navigation they’ve gone, and how to much up a level.
Consider an example like the following that you might find in an online retail website:
Home / Catalog / Men's Clothing / Shirts
UI testing has found that bread crumbs are not used by many people (some studies say less than 5%). However, of the users that do use it, they are found to be very speedy in use. This is makes them into a super user of sorts.
To build it, you can use ordered list, with a class of breadcrumb
. An example of this is:
Notice the simplicity of the code.
Bootstrap will add the slashes automatically via CSS by using the :before
selector and the content
attribute.
The active
class is used to designate the last element in the list, and define it as the page that the person is on.
Creating Breadcrumbs with Bootstrap was originally found on Access 2 Learn