https://github.com/francarstens/docsify-breadcrumb
a simple breadcrumb generator for docsify
https://github.com/francarstens/docsify-breadcrumb
docsify
Last synced: about 1 month ago
JSON representation
a simple breadcrumb generator for docsify
- Host: GitHub
- URL: https://github.com/francarstens/docsify-breadcrumb
- Owner: FranCarstens
- License: mit
- Created: 2024-07-26T20:43:13.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-18T13:29:45.000Z (over 1 year ago)
- Last Synced: 2026-01-13T01:10:16.018Z (about 1 month ago)
- Topics: docsify
- Language: JavaScript
- Homepage: https://francarstens.github.io/docsify-breadcrumb/
- Size: 202 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Docsify Breadcrumb
docsify-breadcrumb
This is a plugin for [Docsify](https://docsify.js.org/#/) that adds a breadcrumb to the top of each page.
## Features
`docsify-breadcrumb` adds a small, accessible breadcrumb to the top of each page. It supports a number of configuration options and can be styled to match your Docsify theme.
The breadcrumb is represented by human readable parts of the url combined using a configurable separator. Each part links to its section. The final breadcrumb reflects the title of the current page.
**For example:**
`/articles/books-and-more/adventure/`
## Basic Usage
Add the following to your `index.html` below your Docsify script tag:
```html
```
## Add default styling
Add the following to your `index.html` just before the closing `` tag:
```html
```
## Configuration
`docsify-breadcrumb` allows some customization through the `window.$docsify` object. Here are the available options:
| Option | Type | Default | Description |
| ----------- | ------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `showHome` | Boolean | `false` | Show the home link when you're on the home page. |
| `homeText` | String | `'Home'` | The text for the home link. |
| `separator` | String | `' › '` | The separator between each breadcrumb item. |
| `casing` | String | `'capitalize'` | The casing of the breadcrumb items. Options follow the CSS standard for `text-transform`. E.g., `'capitalize'`, `'uppercase'`, and `'lowercase'`. See [text-transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) documentation for more information. |
| `linkColor` | String | `'var(--theme-color, #42b983)'` | The color of the breadcrumb links. This can be any valid CSS color value. |
| `size` | String | `'small'` | The size of the breadcrumb links. Options are `'small'` (`0.75em`), `'smaller'` (`0.83em`), and `'normal'` (`1em`). This can easily be overridden with custom CSS. |
### Example
You do not have to include options where you want to use the default values.:
```html
window.$docsify = {
breadcrumb: {
showHome: true,
homeText: 'Home',
separator: ' › ',
casing: 'capitalize',
linkColor: 'var(--theme-color, #42b983)',
size: 'small'
}
}
```
---
Inspired by [the breadcrumb work](https://github.com/docsifyjs/docsify/issues/2016) of [Abhilash](https://github.com/abpanic)
[](https://www.jsdelivr.com/package/npm/docsify-breadcrumb)