https://github.com/sutara79/jquery.breadcrumbs-generator
jQuery plugin to generate breadcrumb list automatically from sitemap.
https://github.com/sutara79/jquery.breadcrumbs-generator
breadcrumbs jquery-plugin
Last synced: about 1 year ago
JSON representation
jQuery plugin to generate breadcrumb list automatically from sitemap.
- Host: GitHub
- URL: https://github.com/sutara79/jquery.breadcrumbs-generator
- Owner: sutara79
- Created: 2015-04-04T12:17:40.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2018-07-27T00:43:45.000Z (almost 8 years ago)
- Last Synced: 2025-04-20T04:03:38.273Z (about 1 year ago)
- Topics: breadcrumbs, jquery-plugin
- Language: JavaScript
- Homepage: https://sutara79.github.io/jquery.breadcrumbs-generator
- Size: 706 KB
- Stars: 3
- Watchers: 1
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# jquery.breadcrumbs-generator
[](https://www.npmjs.com/package/jquery.breadcrumbs-generator)
[](https://travis-ci.org/sutara79/jquery.breadcrumbs-generator)
jQuery plugin to generate breadcrumb list automatically from sitemap.
If you can use server-side language (e.g. PHP, Ruby, Perl), you don't need this plugin.
## Demo
https://sutara79.github.io/jquery.breadcrumbs-generator
## Install
- [GitHub](https://github.com/sutara79/jquery.breadcrumbs-generator): Clone or download. Only you need is `dist/`.
- [npm](https://www.npmjs.com/package/jquery.breadcrumbs-generator): `npm i jquery.breadcrumbs-generator`
- CDN ([jsDelivr](https://github.com/jsdelivr/jsdelivr#usage)):
- jquery.breadcrumbs-generator.min.js: [v1.0.3](https://cdn.jsdelivr.net/npm/jquery.breadcrumbs-generator@1.0.3/dist/jquery.breadcrumbs-generator.min.js)
## Usage
###### <head>
```html
$(function() {
$('#breadcrumbs').breadcrumbsGenerator();
});
```
###### <body>
```html
```
###### CSS
```css
#breadcrumbs li {
display: inline-block;
}
#breadcrumbs li:not(:first-child) {
margin-left: 0.4em;
}
#breadcrumbs li:not(:first-child):before {
content: '>';
margin-right: 0.4em;
}
```
## Note
##### Breadcrumbs structure
This plugin creates like `
So, you should use `
- ` or `
- ` for breadcrumbs.
##### Sitemaps structure
This plugin searches for current-page and its ancestors in href-attributes of the sitemaps.
So, you don't use href-attribute for other purpose in the sitemaps.
##### How to move the home-link to the list of breadcrumbs
If you use `#sitemaps` as a global-navi, and don't need the home-link, you can also move it to `#breadcrumbs`.
```html
```
## Options
You can set options like followings.
```javascript
$('#breadcrumbs').breadcrumbsGenerator({
sitemaps: '#sitemaps',
index_type: 'index.html'
});
```
|Name |Type |Default |Description |
|----------|------|------------|---------------------------|
|sitemaps |string|'#sitemaps' |jQuery selector for sitemap|
|index_type|string|'index.html'|Filename of directory index. This is for when the requested url is a directory (e.g. `example.com/`), not a file (e.g. `example.com/index.html`).|
## Compatibility
- jQuery: >=3.0.0 ([because of XSS vulnerability](https://nodesecurity.io/advisories/jquery_xss))
- Browser: Chrome58, Firefox53, IE11, Edge14
## License
[MIT](http://www.opensource.org/licenses/mit-license.php)
## Author
[Yuusaku Miyazaki](http://sutara79.hatenablog.com/entry/2015/04/04/215219)
( )