Antora - Keep navigation menu expanded while clicking any of the items in the menu

Question

I've set the left navigation menu like this

* link:page1.adoc[Item 1]
** link:item2.adoc[Item 2]
*** link:item3.adoc[Item 3]
* link:item4.adoc[Item 4]

But when I open any page in browser, the navigation is collapsed by default. If I expand the menu and click on one of the page, the page is loading but the navigation menu is getting collapsed. How do I keep the navigation menu to preserver the state while switching between pages or at least always make it expanded?

I'm using Antora default UI

I couldn't find any where how to do this.

Answer 1

You would need to customize the Antora Default UI to achieve this goal.

The 01-nav.js file implements the behavior of the navigation tree. It attempts to find the current page in the navigation tree and, if found, expands the tree to show the current page and its ancestors, then scrolls the navigation so that the entry for the current page is in view.

The tree expansion is handled by adding the is-active class to the entry for the current page and its ancestor entries.

I suspect the most straightforward change you could make that might be acceptable is to change the generated HTML so that every navigation entry has the is-active class.

To do that, you'd need to edit the nav-tree.hbs file on line 4. Change:

  <li class="nav-item{{#if (eq ./url @root.page.url)}} is-current-page{{/if}}" data-depth="{{or ../level 0}}">

To:

  <li class="nav-item is-active{{#if (eq ./url @root.page.url)}} is-current-page{{/if}}" data-depth="{{or ../level 0}}">

Editing the UI would require you to fork the default UI, make the change, build the UI, and then update your playbook to use the new UI.

Or, you can use the supplemental files feature to replace specific files in the active UI with your versions. That's a lot easier than forking the UI, but it can become fragile if the default UI gets updated with changes that are incompatible with your own.