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: Clone or download. Only you need is
dist/
. - npm:
npm i jquery.breadcrumbs-generator
- CDN (jsDelivr):
- jquery.breadcrumbs-generator.min.js: v1.0.3
Usage
<head>
<body>
Home Menu1 Menu2 Menu3
CSS
Note
Breadcrumbs structure
This plugin creates like <li><a href="#">foo</a></li>
.
So, you should use <ol>
or <ul>
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
.
Home Menu1 Menu2 Menu3
Options
You can set options like followings.
;
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)
- Browser: Chrome58, Firefox53, IE11, Edge14