@ithaka/bonsai/documentation/pages/components/breadcrumbs.md

ITHAKA core styling

---
title: Breadcrumbs
description: Text-based navigation that allows a user to see their current location and navigate within a hierarchical organization of pages.
foundation: http://foundation.zurb.com/sites/docs/breadcrumbs.html
sass: ./scss/_breadcrumbs.scss
---

## How To Use

Adding a `.breadcrumbs` class to a list element will cause the elements to be listed inline with slashes separating to show hierarchy

```html_example
<ul class="breadcrumbs">
    <li><a href="#">MyJSTOR</a></li>
    <li><a href="#">My Lists</a></li>
    <li>My list about BONSAI</li>
</ul>
```

## Accessibility
1. Make sure the breadcrumbs are accessible via a keyboard.

## Guidelines
1. Progresses from the highest level to the lowest, one step at a time.
1. Simple text link for each level (except for the current page, because you should never have a link that does nothing).
1. Breadcrumb navigation should be regarded as an extra feature and shouldn’t replace effective primary navigation menus.
1. Make sure breadcrumbs are styled as links.
1. Provide adequate padding around element so that it is easy to activate.

## Avoid
1. Avoid using breadcrumb trails as primary navigation.
1. Avoid using breadcrumbs for single-level websites that have no logical hierarchy or grouping.