Add Search Bar to MkDocs

What is MkDocs

MkDocs is a platform for creating documentation with markdown.

Get an API key

Follow these steps to create an API key for your web integration.

In docs folder create a custom js file, for example search-bar.js. Add path to this file to the mkdocs.yml and disable default search bar with plugins: []:

mkdocs.yml

extra_javascript:
  - search-bar.js
plugins: []

Then add the search bar:

search-bar.js

document.addEventListener("DOMContentLoaded", () => {
  // Create a new div for the Inkeep search bar
  const inkeepDiv = document.createElement("div");
  inkeepDiv.id = "inkeepSearchBar";
 
  // Get the header element where you want to place the Inkeep search bar
  const headerElement = document.querySelector(".navbar-nav");
  if (headerElement) {
    headerElement.parentNode.insertBefore(inkeepDiv, headerElement.nextSibling);
  }
 
  // Load the Inkeep script
  const inkeepScript = document.createElement("script");
  inkeepScript.src =
    "https://cdn.jsdelivr.net/npm/@inkeep/cxkit-js@0.5/dist/embed.js";
  inkeepScript.type = "module";
  inkeepScript.defer = true;
  document.head.appendChild(inkeepScript);
 
  // Initialize the Inkeep widget after the script loads
  inkeepScript.addEventListener("load", () => {
    Inkeep.SearchBar("#inkeepSearchBar", {
      baseSettings: {
        apiKey: "INKEEP_API_KEY", // required
        primaryBrandColor: "#26D6FF",
        organizationDisplayName: "Inkeep",
        colorMode: {
          sync: {
            target: document.documentElement,
            attributes: ["data-md-color-scheme"],
            isDarkMode: (attributes) => {
              const currentTheme = attributes["data-md-color-scheme"];
              return currentTheme === "dracula" || currentTheme === "dark";
            },
          },
        },
      },
    });
  });
});

For a full list of customizations, check out the Search Bar documentation.

Add Search Bar to MkDocs

What is MkDocs

Get an API key

Initialize the widget

On this page