Components Breadcrumbs
Breadcrumb

A breadcrumb shows the user’s current location on a site and allows them to navigate forward or backward within the site.

Text only
  1. Dashboard
  2. Template
  3. Figma React
                        
                        <ol class="ds-breadcrumb mb20">
           <li class="ds-breadcrumb-item"><a href="#">Dashboard</a></li> 
           <li class="ds-breadcrumb-item"><a href="#">Template</a></li>
           <li class="ds-breadcrumb-item"><a href="#">Figma React</a></li>
</ol>
Text with icon
  1. Dashboard
  2. Template
  3. Figma React
                    
                    <ol class="ds-breadcrumb mb20">
    <li class="ds-breadcrumb-item"><a href="#"><i class="icon-dashboard2 mr7"></i>Dashboard</a></li> 
    <li class="ds-breadcrumb-item"><a href="#"><i class="icon-templates-two mr7"></i>Template</a></li>
    <li class="ds-breadcrumb-item"><a href="#"><i class="icon-products mr7"></i>Figma React</a></li>
</ol>
Breadcrumbs with more than 4 child
  1. Another Home
  2. Another Layer 1
  3. Another Layer 2
  4. Another Layer 3
  5. Another Layer 4
  6. Another Layer 5
        
        <ol class="ds-breadcrumb">
    <li class="ds-breadcrumb-item"><a href="#">Another Home</a></li>
    <li class="ds-breadcrumb-item"><a href="#">Another Layer 1</a></li>
    <li class="ds-breadcrumb-item"><a href="#">Another Layer 2</a></li>
    <li class="ds-breadcrumb-item"><a href="#">Another Layer 3</a></li>
    <li class="ds-breadcrumb-item"><a href="#">Another Layer 4</a></li>
    <li class="ds-breadcrumb-item active"><a href="#">Another Layer 5</a></li>
</ol>

Guidelines

  • Place breadcrumbs on the top left corner of the page.
  • Show navigation from the lowest level to the highest level.