Illinois web toolkit documentation

Version 2.7.3

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

  • 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