Component

Breadcrumbs

Description 

The Illinois components implementation of breadcrumbs provides a list of formatted links that provide the path between the site’s home page and the page the reader is currently viewing.  

The tag <il-breadcrumbs> is used for the container which will include one or more <il-breadcrumb-page> items in order to provide a navigable path for users to move to different points in the website’s structure. 

What it looks like

Example image (ver. 2.4, Dec. 8, 2021), more examples are available at Breadcrumbs: 

Try it out

• Component Builder (to see how it works with your own page links): https://builder.toolkit.illinois.edu/prod/breadcrumbs/index.html 
• Dev Codepen (to experiment with all the code): https://codepen.io/il-toolkit/pen/BaRXRNM 

Recommended patterns 

• The entire group of breadcrumbs should be enclosed within the <il-breadcrumbs> tag. 
• Each breadcrumb item should get its own <il-breadcrumbs-page> tag. 
• The site’s home page should be the first item in the list of breadcrumbs and should link to the site root. 
• Pages used to navigate between the home page and the current page should also be listed and linked. 
• The current page item should contain the “current” tag in code and should not be linked, since following a link to the current page would just reload the page. 

Example code that produces a result like this screen shot (change items marked in bold to match your own content): 

<il-breadcrumbs> 
  <il-breadcrumbs-page href="/academics">Academics</il-breadcrumbs-page> 
  <il-breadcrumbs-page href="/academics/undergraduate">Undergraduate programs</il-breadcrumbs-page> 
  <il-breadcrumbs-page current>Degree programs</il-breadcrumbs-page> 
</il-breadcrumbs> 

Customizations and notes 

• There’s not much to change about breadcrumbs. The dividers between the breadcrumbs are an SVG icon which looks like the greater-than symbol ( > ), and this is not alterable. 
• <il-breadcrumbs> creates a labelled <nav> tag so you don’t need to add a <nav> tag separately. 

Syntax guide

In the examples below, change the elements marked in bold to match your own content.

il-breadcrumbs 

Syntax:  

<il-breadcrumbs>  
   <il-breadcrumbs-page href=”/path/to/page/”>Title</il-breadcrumbs-page> 
   (more breadcrumbs-page items as needed) 
   <il-breadcrumbs-page current> Title of current page</il-breadcrumbs-page> 
</il-breadcrumbs> 

• Required: Yes 
• Details: <il-breadcrumbs> is the container that holds one or more <il-breadcrumbs-page> items. Links are applied to <il-breadcrumbs-page> items, not to <il-breadcrumbs> itself. 

il-breadcrumbs-page 

Syntax:

<il-breadcrumbs-page href=”/path/to/page/”>Title</il-breadcrumbs-page> 

• Required: For the home page, the current page, and each page on the navigation path between them. 
• Details: Each il-breadcrumbs-page item (except for the last one) should contain an href with the path to the page being referred to and the human-readable page title that will be displayed. Repeat as needed within an <il-breadcrumbs> container. 

Current page identifier 

Syntax:

<il-breadcrumbs-page current> Title of the current page </il-breadcrumbs-page> 

• Value: The word current should appear within the il-breadcrumbs-page element that describes the current page. It should also be the last item in the breadcrumb chain. 

• Default value: (not present) 
• Required: On the last page in the breadcrumb chain, yes. 
• Details: In addition to marking the last il-breadcrumbs-page item as the current page, the current page should also not contain an href or other link. (Clicking a link to the current page would just reload the page.)  

About this component

• Type: Custom Element 
• Introduced in: v2.3.0; 9/29/2021 
• Depreciated: No