DocFx Navigation Menu/Submenu Highlight

Have you ever searched for a solution and scratched your head from morning to night but didn’t find a proper solution to it? Well, I was working on a project, and I had a similar experience where I was creating the documentation of our project using DocFx.

I just wanted to highlight the selected option on sub navbar, though it’s a piece of cake with CSS but due to restrictions in DocFx, it’s really difficult. Well, now it’s a piece of cake since I have a solution here and just follow along with me following below steps:

Step 1: Add breadcrumb.tmpl.partial file in template -> partials folder in your project for sub navbar. Refer docs here for list of partials supported.

{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
<div class="subnav navbar navbar-default">
  <div class="container hide-when-search" id="breadcrumb">
    <ul class="breadcrumb">
      <li>{{_tocTitle}}</li>
    </ul>
  </div>
</div>

Step 2: Add the basic html (replace <li>{{_tocTitle}}</li> of step 1) per project requirement in the partial file.

<li><a href="#href1">Sub Menu 1</a></li>
<li><a href="#href2">Sub Menu 2</a></li>
<li><a href="#href3">Sub Menu 3</a></li>
<li><a href="#href4">Sub Menu 4</a></li>

Step 3: In the li tag for the menu/sub menu, add id for each tag.

<li id="id1"><a href="#href1">Sub Menu 1</a></li>
<li id="id2"><a href="#href2">Sub Menu 2</a></li>
<li id="id3"><a href="#href3">Sub Menu 3</a></li>
<li id="id4"><a href="#href4">Sub Menu 4</a></li>

Step 4: In styles folder, we will see main.css and main.js file in which we should be adding css and javascript code. In main.js, create a simple void javascript function.

Step 5: In the javascript function, fetch the element by id (refer to id name added step 3) and check if the page contains the URL for which menu/submenu must be active.

function setSubNavBarHighlight() {
    const docssubnavbarselector = document.getElementById("#id1");
    if (window.location.href.includes("page_href")) {
        docssubnavbarselector.classList.add("active");
    } else {
        docssubnavbarselector.classList.remove("active");
    }
}

Step 6: If the condition is true of step 5 then add active class to the element fetched by id else remove active class from the element.

Following these steps will look like:

Filename: breadcrumb.tmpl.partial

<div class="subnav navbar navbar-default">
    <div class="container hide-when-search" id="breadcrumb">
        <ul class="breadcrumb">
            <li id="id1"><a href="#href1">Sub Menu 1</a></li>
            <li id="id2"><a href="#href2">Sub Menu 2</a></li>
            <li id="id3"><a href="#href3">Sub Menu 3</a></li>
            <li id="id4"><a href="#href4">Sub Menu 4</a></li>
        </ul>
    </div>
</div>

Filename: main.js

function setSubNavBarHighlight() {
    const docssubnavbarselector = document.getElementById("#id1");
    if (window.location.href.includes("page_href")) {
        docssubnavbarselector.classList.add("active");
    } else {
        docssubnavbarselector.classList.remove("active");
    }
}

Having trouble to add a docs site?

If you need any additional details in this regard then feel free to chat with our live agent at impledge.com

Thank you !!