Breadcrumbs in JTB_MD serve as a valuable navigational aid, indicating the current location within a hierarchy of web pages. Designed to enhance user navigation, breadcrumbs visually represent the path users have taken, allowing them to easily trace back and navigate to higher levels in the hierarchy.

How to use

To create a breadcrumb in your project, build a container (<ul> or <ol>) with the .jtbBreadcrumb class and populate it with items using <li> tags.

JTB_MD
Components
Breadcrumbs

                <!-- Default breadcrumb -->
<ul class='jtbBreadcrumb'>
    <li><b>JTB_MD</b></li>
    <li>Components</li>
    <li>Breadcrumbs</li>
</ul>

If you want hierarchical elements to function as hyperlinks, allowing users to switch between pages, simply enclose them within <a> tags.

JTB_MD
Components
Breadcrumbs

                <!-- Default breadcrumb with links -->
<ul class='jtbBreadcrumb'>
    <li><a href='...'><b>JTB_MD</b></a></li>
    <li><a href='...'>Components</a></li>
    <li>Breadcrumbs</li>
</ul>

Additional Content

JTB_MD uses inline flex as the default display property for all elements in breadcrumbs. This means you don't need to do anything extra to include content in your breadcrumb elements. Simply add the content as desired, and the library will automatically detect and adjust it for you.

Components
Breadcrumbs

                    <!-- Breadcrumbs with additional content -->
<ul class='jtbBreadcrumb'>
    <li><i class='jtbIR-home'></i></li>
    <li><i class='jtbIR-atom'></i> Components</li>
    <li><i class='jtbIR-rocket'></i> Breadcrumbs</li>
</ul>

It's important to note that if you intend to use multiple HTML elements within your list items and wish to disable the default flex structure, you can achieve this by wrapping your content with <span>.

JTB_MD
Components
Breadcrumbs mixed

                    <!-- Breadcrumbs with non-flex li element -->
<ul class='jtbBreadcrumb'>
    ...
    <li><span>Breadcrumbs <b>mixed</b></span></li>
</ul>

Changing Separator

If the default separator of breadcrumbs is not suitable for your project, and you wish to use something else, you can easily customize it by modifying the .jtbBreadcrumb > li + li:before's content parameter using CSS.

JTB_MD
Components
Breadcrumbs

                <!-- Defining new seperator -->
<style type='text/css'>
    #customSeperator > li + li:before{
        font-family: 'jtbIR';
        content: '\ea85';
        color: red;
    }
</style>

<!-- 'LOL' as seperator (Custom) -->
<ul class='jtbBreadcrumb' id='customSeperator'>
    <li><b>JTB_MD</b></li>
    <li>Components</li>
    <li>Breadcrumbs</li>
</ul>