2017-05-11 07:56:23 +03:00
# Primer Marketing CSS Breadcrumb Navigation
2017-06-23 23:57:00 +03:00
[![npm version ](http://img.shields.io/npm/v/primer-breadcrumb.svg )](https://www.npmjs.org/package/primer-breadcrumb)
2017-06-12 18:37:40 +03:00
[![Build Status ](https://travis-ci.org/primer/primer-css.svg?branch=master )](https://travis-ci.org/primer/primer-css)
2017-05-11 07:56:23 +03:00
> Breadcrumb navigation for GitHub's marketing pages with parents / grandparents.
This repository is a module of the full [primer-css][primer] repository.
## Documentation
<!-- %docs
title: Breadcrumbs
status: Stable
-->
Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’ s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages. Breadcrumbs are most appropriate on pages that:
- Are many levels deep on a site
- Do not have a section-level navigation
- May need the ability to quickly go back to the previous (parent) page
#### Usage
2017-09-13 10:53:17 +03:00
```html title="This is breadcrumb!"
2017-05-11 07:56:23 +03:00
< nav aria-label = "Breadcrumb" >
< ol >
< li class = "breadcrumb-item text-small" > < a href = "/business" > Business< / a > < / li >
< li class = "breadcrumb-item text-small" > < a href = "/business/customers" > Customers< / a > < / li >
< li class = "breadcrumb-item breadcrumb-item-selected text-small text-gray" aria-current = "page" > MailChimp< / li >
< / ol >
< / nav >
```
2017-09-13 10:53:17 +03:00
#### Another example
```html
< nav aria-label = "Breadcrumb" >
< ol >
< li class = "breadcrumb-item text-small" > < a href = "/business" > One< / a > < / li >
< li class = "breadcrumb-item text-small" > < a href = "/business/customers" > Two< / a > < / li >
< li class = "breadcrumb-item breadcrumb-item-selected text-small text-gray" aria-current = "page" > Three< / li >
< / ol >
< / nav >
```
2017-09-13 11:12:01 +03:00
```html note="this should get the default title"
< nav aria-label = "Breadcrumb" >
< ol >
< li class = "breadcrumb-item text-small" > < a href = "/business" > A< / a > < / li >
< li class = "breadcrumb-item text-small" > < a href = "/business/customers" > B< / a > < / li >
< li class = "breadcrumb-item breadcrumb-item-selected text-small text-gray" aria-current = "page" > C< / li >
< / ol >
< / nav >
```
```html title="this should NOT show up" story=false
2017-09-13 10:53:17 +03:00
< nav aria-label = "Breadcrumb" >
< ol >
< li class = "breadcrumb-item text-small" > < a href = "/business" > A< / a > < / li >
< li class = "breadcrumb-item text-small" > < a href = "/business/customers" > B< / a > < / li >
< li class = "breadcrumb-item breadcrumb-item-selected text-small text-gray" aria-current = "page" > C< / li >
< / ol >
< / nav >
```
2017-05-11 07:56:23 +03:00
<!-- %enddocs -->
## License
MIT © [GitHub ](https://github.com/ )
[primer]: https://github.com/primer/primer
[primer-support]: https://github.com/primer/primer-support
[support]: https://github.com/primer/primer-support
[docs]: http://primercss.io/
[npm]: https://www.npmjs.com/
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
[sass]: http://sass-lang.com/