Docsify Breadcrumb

docsify-breadcrumb

This is a plugin for Docsify 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:

<!-- Adds the breadcrumb JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/docsify-breadcrumb@latest/dist/index.min.js"></script>

Add default styling

Add the following to your index.html just before the closing </head> tag:

<!-- Adds the default breadcrumb styling -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-breadcrumb@latest/dist/breadcrumb.min.css">

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 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.:

<script>
  window.$docsify = {
    breadcrumb: {
      showHome: true,
      homeText: 'Home',
      separator: ' &rsaquo; ',
      casing: 'capitalize',
      linkColor: 'var(--theme-color, #42b983)',
      size: 'small'
    }
  }
</script>

---

Inspired by the breadcrumb work of Abhilash