Breadcrumb

A breadcrumb is a navigation scheme that shows the navigation trail as the user moves down a hierarchy or through a series of steps.

Breadcrumb with Truncation

The class .truncated is added to give truncation capabilities through JavaScript.

Regular State

• Example A
• Example B
• Example C

Truncated State

In the below example there are 8 values. Truncation limits the values to 6 and tucks in the remaining values behind an ellipsis. Clicking the ellipsis will reveal those values and select the last hidden value. The other values 6-8 will go away.

• Example 1
• Example 2
• Example 3
• Example 4
• Example 5
• Example 6
• Example 7
• Example 8

Code Snippet

  
Example 1
  
Example 2
  
Example 3
  
Example 4
  
Example 5
  
Example 6
  
Example 7
  
Example 8