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
- 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.
In the examples below, change the elements marked in bold to match your own content.
<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.
- 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
<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