Scrollspy

Example with nested nav

Bootstrap’s Scrollspy works with nested .navs. If a nested .nav is .active, its parents will also be .active. An animation of an example ToC navbar is shown below.

<topic>
  <title>Navbar</title>
  ...
  <topic id="item1">
    <title>Item 1</title>
    ...
    <topic id="item1-1" conref="...">
      <title>Item 1.1</title>
    </topic>
    <topic id="item1-2" conref="...">
      <title>Item 1.2</title>
    </topic>
  </topic>
  <topic id="item2" conref="...">
    <title>Item 2</title>
    ...
  </topic>
</topic>

To use this option, embed the subtopics and add the parameters --nav-toc=nav-pill-partial and --scrollspy-toc=nav-pill to the dita command.

dita --input=path/to/your.ditamap \
     --format=html5-bootstrap \
     --nav-toc=nav-pill-partial \
     --scrollspy-toc=nav-pill

Example with list-group

Bootstrap’s Scrollspy component also works with list-groups. An animation of an example ToC menu is shown below.

<topic id="item1">
    <title>Item 1</title>
    ...
    <topic id="item2" conref="...">
      <title>Item 2</title>
    </topic>
    <topic id="item3" conref="...">
      <title>Item 3</title>
    </topic>
  </topic>
  <topic id="item4" conref="...">
    <title>Item 4</title>
  </topic>
</topic>

To use this option, embed the subtopics and add the parameters --nav-toc=list-group-partial and --scrollspy-toc=list-group to the dita command.

dita --input=path/to/your.ditamap \
     --format=html5-bootstrap \
     --nav-toc=list-group-partial \
     --scrollspy-toc=list-group

Example with collapse

Bootstrap’s Scrollspy also works with a series of simple <li> list elements.

To use this option, embed the subtopics and add the parameters --nav-toc=collapsible and --scrollspy-toc=list to the dita command.

dita --input=path/to/your.ditamap \
     --format=html5-bootstrap \
     --nav-toc=collapsible \
     --scrollspy-toc=list