Using asciidoctor-tabs causes default Antora side-nav to break (nested elements won't expand)

[rmoff]

We're using Antora to successfully build our docs site, and it works great.

I've tested adding asciidoctor-tabs to it but found that whilst the tabs bit works great, it breaks the existing side navigation.

• Nested elements cannot be expanded.

This can be seen in the preview build here: https://platform-pr-95.d25qnlv4t7f9px.amplifyapp.com/welcome.html

For reference, the following is how the nav usually behaves:

https://github.com/user-attachments/assets/a1ae3da0-554b-484c-aac1-04c1f23bac47

---

We're using:

• Antora 3.1.4
• @asciidoctor/tabs: 1.0.0-beta.6

Playbook:

site:
  title: Decodable
  start_page: ROOT::welcome.adoc
  url: https://docs.decodable.co
asciidoc:
  attributes:
    source-highlighter: ~
  extensions:
  - '@asciidoctor/tabs'
content:
  sources:
   - url: https://github.com/decodableco/decodable.git
     branches: main
     start_path: docs
ui:
  bundle:
    url: https://gitlab.com/antora/antora-ui-default/-/jobs/artifacts/HEAD/raw/build/ui-bundle.zip?job=bundle-stable
    snapshot: true
  supplemental_files: supplemental-ui
antora:
  extensions:
  - '@antora/lunr-extension'

(the content repo is private, sorry).

The root folder looks like this:

❯ ll
total 384
-rw-r--r--@   1 rmoff  staff   627B 30 Sep 12:21 antora-playbook.yml
drwxr-xr-x@ 277 rmoff  staff   8.7K 26 Sep 17:03 node_modules
-rw-r--r--@   1 rmoff  staff   136K 30 Sep 12:21 package-lock.json
-rw-r--r--@   1 rmoff  staff   1.0K 30 Sep 12:21 package.json
drwxr-xr-x@   8 rmoff  staff   256B 25 Sep 15:45 supplemental-ui

I've added symlinks for the css and js files back to the node folder:

❯ tree supplemental-ui
supplemental-ui
├── css
│   ├── fonts.css
│   ├── header.css
│   ├── prism-overrides.css
│   ├── prism.css
│   ├── style.css
│   └── vendor
│       └── tabs.css -> ../../../node_modules/@asciidoctor/tabs/dist/css/tabs.css
├── js
│   ├── prism.js
│   └── vendor
│       └── tabs.js -> ../../../node_modules/@asciidoctor/tabs/dist/js/tabs.js
└── partials
    ├── article-404.hbs
    ├── body-nonav.hbs
    ├── connector-docs-helper.hbs
    ├── footer-content.hbs
    ├── footer-scripts.hbs
    ├── footer-trackers.hbs
    ├── head-scripts.hbs
    ├── head-styles.hbs
    ├── head-title.hbs
    ├── head-trackers.hbs
    ├── header-content.hbs
    └── nav.hbs

To supplemental-ui/partials/footer-scripts.hbs I've added:

<script async src="{{{uiRootPath}}}/js/vendor/tabs.js" data-sync-storage-key="preferred-tab"></script>

and to supplemental-ui/partials/head-styles.hbs:

<link rel="stylesheet" href="{{{uiRootPath}}}/css/vendor/tabs.css">

This all works for the tabs; they work lovely—just not the nav as a result.

https://github.com/user-attachments/assets/9128a6ec-ab7d-4b00-af4e-7fac46af405f

[eskwayrd]

Investigating your site, I don't see the /_/js/site.js load. Did you replace that with the tabs.js line? Without the main javascript, none of the default UI's features are active.

I discovered that by inspecting the expander button in the nav entries, and they didn't have any attached events, so they can't do anything.

[rmoff]

Excellent, thank you @eskwayrd

I'd added a custom footer-scripts.hbs which overrode the default one.

So I added back in the content, and now my footer-scripts.hbs looks like this:

<script id="site-script" src="{{{uiRootPath}}}/js/site.js" data-ui-root-path="{{{uiRootPath}}}"></script>
<script async src="{{{uiRootPath}}}/js/vendor/highlight.js"></script>
{{#if env.SITE_SEARCH_PROVIDER}}
{{> search-scripts}}
{{/if}}
<script async src="{{{uiRootPath}}}/js/vendor/tabs.js" data-sync-storage-key="preferred-tab"></script>

and everything works 🎉

[mojavelinux]

and everything works

:tada:

I added an admonition to the document to make the instructions more clear.