BREADCRUMB

Swavy UI breadcrumb is used for navigating parent pages of the current webpage in which it is. It also shows the current page as active and non-clickable

DEFAULT BREADCRUMB

To add rounded corners to Swavy UI breadcrumb, add sw_rsq-2 to the class attribute of the breadcrumb element. You can set the depth of the rounded corners ranging from 1 - 8

To set background color for Swavy UI breadcrumb, you can use any color from the color spectrum, for example, add bg-baby_blue to the class attribute of the breadcrumb element to add background color of baby blue

                    
<nav class="sw_breadcrumb" role="navigation" aria-label="breadcrumb">
    <ul>
        <li class="sw_breadcrumb-menu"><a href="#" class="sw_breadcrumb-link">Home</a></li>
        <li class="sw_breadcrumb-menu"><a href="#" class="sw_breadcrumb-link">Pictures</a></li>
        <li class="sw_breadcrumb-menu"><a href="#" class="sw_breadcrumb-link">Summer 15</a></li>
        <li class="sw_breadcrumb-menu">Italy</li>
    </ul>
</nav>

BREADCRUMB WITH ALIGNMENT & TRANSPARENT BACKGROUND

To remove background color from the breadcrumb, add bg-none to the class attribute of the breadcrumb element

                    
<nav class="sw_breadcrumb sw_breadcrumb-styled sw_breadcrumb-center bg-wheat">
    <ul>
        <li class="sw_breadcrumb-menu"><a href="#" class="sw_breadcrumb-link">Home</a></li>
        <li class="sw_breadcrumb-menu"><a href="#" class="sw_breadcrumb-link">Pictures</a></li>
        <li class="sw_breadcrumb-menu"><a href="#" class="sw_breadcrumb-link">Summer 15</a></li>
        <li class="sw_breadcrumb-menu">Italy</li>
    </ul>
</nav>

<nav class="sw_breadcrumb sw_breadcrumb-right bg-none">
    <ul>
        <li class="sw_breadcrumb-menu"><a href="#" class="sw_breadcrumb-link">Home</a></li>
        <li class="sw_breadcrumb-menu"><a href="#" class="sw_breadcrumb-link">Pictures</a></li>
        <li class="sw_breadcrumb-menu"><a href="#" class="sw_breadcrumb-link">Summer 15</a></li>
        <li class="sw_breadcrumb-menu">Italy</li>
    </ul>
</nav>

BREADCRUMB WITH DIFFERENT SEPARATORS

                    
<nav class="sw_breadcrumb sw_breadcrumb-styled arrow_separator bg-none">
    <ul>
        <li class="sw_breadcrumb-menu"><a href="#" class="sw_breadcrumb-link">Home</a></li>
        <li class="sw_breadcrumb-menu"><a href="#" class="sw_breadcrumb-link">Pictures</a></li>
        <li class="sw_breadcrumb-menu"><a href="#" class="sw_breadcrumb-link">Summer 15</a></li>
        <li class="sw_breadcrumb-menu">Italy</li>
    </ul>
</nav>

<nav class="sw_breadcrumb dot_separator bg-none">
    <ul>
        <li class="sw_breadcrumb-menu"><a href="#" class="sw_breadcrumb-link">Home</a></li>
        <li class="sw_breadcrumb-menu"><a href="#" class="sw_breadcrumb-link">Pictures</a></li>
        <li class="sw_breadcrumb-menu"><a href="#" class="sw_breadcrumb-link">Summer 15</a></li>
        <li class="sw_breadcrumb-menu">Italy</li>
    </ul>
</nav>

<nav class="sw_breadcrumb angle_separator bg-none">
    <ul>
        <li class="sw_breadcrumb-menu"><a href="#" class="sw_breadcrumb-link">Home</a></li>
        <li class="sw_breadcrumb-menu"><a href="#" class="sw_breadcrumb-link">Pictures</a></li>
        <li class="sw_breadcrumb-menu"><a href="#" class="sw_breadcrumb-link">Summer 15</a></li>
        <li class="sw_breadcrumb-menu">Italy</li>
    </ul>
</nav>