Skip to content
Indiana University Logo
Rivet Design System
  • Components Add-ons Content guide
  • What is Rivet? Blog Roadmap Changelog
  1. February 25, 2021

    Rivet 1.8.0 release

    Rivet 1.8.0 is now available. This release adds border removal utility classes and fixes bugs related to the button, dropdown, and collapsible components.

  2. February 15, 2021

    Rivet announcements: Beta timeline, GitHub Discussions, and 1.8.0 release

    Updates about Rivet's development in the spring and beyond.

  3. January 20, 2021

    Rivet featured on Accessible Code Libraries and Design Patterns list

    Rivet was highlighted alongside the U.S. government, GOV.UK, and Salesforce design systems.

More posts Get updates in your inbox
Install via NPM Download CSS & JS Hosted assets
Navigation
    • Components
    • Add-ons
    • Content guide
    • What is Rivet?
    • Blog
    • Roadmap
    • Changelog
  • Use Rivet
Resources
  • User Experience Office
  • Accessibility Evaluations
  • Rivet Software Design System
  • IU Framework for WCMS
Version 1.8.0
  • Information
    • Roadmap
    • Changelog
    • Component status
    • Contributing
  • Getting started
    • Install with NPM
    • Rivet Sass
  • Layout
    • Box
    • Grid
    • Panels
    • Spacing
    • Typography
  • Page content
    • Badges
    • Links
    • Lists
    • Media Object
    • Step Indicator
    • Tables
    • Tabs This component requires JS
    • Timeline
  • Forms
    • Buttons
    • Segmented Buttons
    • Checkboxes
    • File input This component requires JS
    • Input group
    • Radio buttons
    • Select element
    • Text inputs
  • Navigation
    • Breadcrumb
    • Dropdown This component requires JS
    • Footer
    • Header This component requires JS
    • Menu
    • Pagination
  • Overlays & Feedback
    • Alerts This component requires JS
    • Loading indicator
    • Modals This component requires JS
  • Utilities
    • Border
    • Display
    • Flex
    • Text
    • Visibility
    • Width
    • z-index
Ready Added in 1.0.0

Breadcrumb

A navigation component that indicates the user's current location in the nav hierarchy

Default breadcrumb

  1. Home
  2. Files
  3. my-file.txt
<nav role="navigation" aria-label="Breadcrumbs">
    <ol class="rvt-breadcrumbs">
        <li><a href="#"> Home </a></li>
        <li><a href="#"> Files </a></li>
        <li aria-current="page">my-file.txt</li>
    </ol>
</nav>

When to use

Use breadcrumbs when your application has multiple levels in the navigation hierarchy. Breadcrumbs can help users navigate quickly between these levels.

When to consider something else

Avoid using the breadcrumb nav when your application only has one level of navigation.

Implementation notes

The default breadcrumb is minimally styled with CSS-generated content (/) used as separators.

Callout example

There is also a .rvt-breadcrumbs--call-out modifier class that adds a small amount of padding and a light gray background. This is useful for when you need to draw more attention to the breadcrumb.

  1. Home
  2. Files
  3. my-file.txt
<nav role="navigation" aria-label="Breadcrumbs call out">
    <ol class="rvt-breadcrumbs rvt-breadcrumbs--call-out">
        <li><a href="#"> Home </a></li>
        <li><a href="#"> Files </a></li>
        <li aria-current="page">my-file.txt</li>
    </ol>
</nav>

Accessibility

The breadcrumb component is wrapped in a nav element so that it is announced to assistive technologies. It is also a good idea to add aria-label attributes to the nav element and current page li that describes the navigation.

Resources

  • NN Group on the benefits of breadcrumb navigation
  • ARIA authoring practices example of accessible breadcrumb nav

On this page

    • Default breadcrumb
    • When to use
    • When to consider something else
    • Implementation notes
      • Callout example
    • Accessibility
    • Resources
Have a question about Rivet?

We're happy to help! If you've found a bug, typo, or have a request, the best way to get in touch is to create an issue on Github.

For all other questions please feel free to email us at rivet@iu.edu

  • Accessibility
  • Privacy Notice
  • Copyright © The Trustees of Indiana University