docsifyjs/docsify

Breadcrumb navigation

CobraStarLE opened this issue · 4 comments

CobraStarLE commented

Hi guys, how to implement breadcrumb navigation, thanks!

abpanic commented

Hi @CobraStarLE :

In Docsify, you can implement breadcrumb navigation using a custom plugin. Follow these steps to add breadcrumb navigation to your Docsify project:

Add the following JavaScript code to a new file named breadcrumb-plugin.js in your project directory:

function breadcrumbPlugin(hook, vm) {
  hook.afterEach(function (html, next) {
    var url = vm.route.file;
    var parts = url.split("/");
    var breadcrumb = "<ul class='breadcrumb'>";
    var currentPath = "";

    parts.forEach(function (part, index) {
      currentPath += part + "/";
      var displayText = part.replace(/\.md$/, "").replace(/[_-]/g, " ");
      var capitalizedText = displayText.charAt(0).toUpperCase() + displayText.slice(1);

      if (index < parts.length - 1) {
        breadcrumb += "<li><a href='" + currentPath + "'>" + capitalizedText + "</a></li>";
      } else {
        breadcrumb += "<li class='active'>" + capitalizedText + "</li>";
      }
    });

    breadcrumb += "</ul>";

    next(breadcrumb + html);
  });
}

if (window) {
  window.$docsify.plugins = [].concat(breadcrumbPlugin, window.$docsify.plugins);
}

This plugin code will generate breadcrumb navigation based on the file path of the current page.

Add a CSS file named breadcrumb.css to style the breadcrumb navigation:

.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 1em 0;
  font-size: 0.9em;
}

.breadcrumb li {
  display: inline;
}

.breadcrumb li::after {
  content: "/";
  padding: 0 0.5em;
}

.breadcrumb li.active::after {
  content: "";
}

.breadcrumb a {
  text-decoration: none;
  color: #0366d6;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

Update your index.html file to include the breadcrumb plugin and the CSS file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Docsify Project</title>
  <!-- Docsify CSS -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@latest/lib/themes/vue.css">
  <!-- Breadcrumb CSS -->
  <link rel="stylesheet" href="breadcrumb.css">
</head>
<body>
  <div id="app"></div>
  <!-- Docsify script -->
  <script src="//cdn.jsdelivr.net/npm/docsify@latest/lib/docsify.min.js"></script>
  <!-- Breadcrumb plugin -->
  <script src="breadcrumb-plugin.js"></script>
  <!-- Add any other plugins or configurations here -->
</body>
</html>

Now, you should see breadcrumb navigation on your Docsify pages based on the file path. The plugin will automatically generate breadcrumb navigation for each directory level in the file path, and it will convert filenames into readable text by replacing underscores and hyphens with spaces and capitalizing the first letter of each word.

paulhibbitts commented

Thanks so much for sharing that approach here @abpanic !