Dropdown navigation menu for HTML output

mjaquiery commented 5 years ago

Intro

About a year ago there was a request #1116 for dropdown menus in the Rmarkdown HTML output. The contributed solution didn't work well for me, so I spent some time putting together a standalone solution which produces a bootstrap-themed fixed navigation menu (demo here).

I don't have the time or knowledge to integrate my solution with the traditional Rmarkdown workflow, but perhaps someone with the necessary experience would benefit from having my code available.

What the code does

Identify a heirachy of elements with the 'section' class (which Rmarkdown assigns to headers of each level).
Compile the heirachy into a navigable menu with dropdowns where appropriate.
Style the menu using Bootstrap nav and dropdown menu classes.
Insert that menu into the HTML document above the main content.

Advantages

I've found the floating ToC quite invasive for many documents, especially longer ones. This version is unobtrusive and provides links to everywhere in the document from everywhere in the document.

Known issues

The navigation to name markers doesn't account for the nav bar itself, so the title you asked to jump to is always hidden below the nav bar.

Shortfalls

There are some features which aren't present here that would make the menu easier to use and more streamlined with the other Rmarkdown stuff:

Customisable heading level depth. This is supported in the javascript, but can't be specified via Rmarkdown option at present
Respecting user wishes re: in/exclusion similar to .tabset
Easy implementation as with .tabset

P.S. please forgive (and correct) me if this isn't appropriate as an 'issue'; I'm fairly new to larger projects on GitHub.

yihui commented 5 years ago

I think this is an entirely valid 'issue'. Many thanks for your effort! I'm afraid we won't have time to look into what you did or integrate it into the rmarkdown package until next year (at least after rstudio::conf).

cderv commented 3 years ago

Note: This would be interested to add as opt in element for our potential future format based on bootstap 4.

johngayler-kmd commented 3 years ago

This would be a fantastic addition. I'm in a similar boat and finding the floating TOC takes up far too much space for reports and would love to see a horizontal nav bar which reference internal headers similar to what's available when building a website using Rmarkdown.

cderv commented 2 years ago

Note: This could also help with https://github.com/rstudio/rmarkdown/issues/1571 for a TOC on mobile that is more usable.

tuckerolson2 commented 1 year ago

There's no way to remove the tab titles within the outputted text? For example, if I have a tab titled "Home Page", the html output will always show the giant heading "Home Page" below (where the content would be)?

cderv commented 1 year ago

@tuckerolson2 not quite sure what you are exactly referring too. For question like this, best is to share an example we can run and also ask on Q&A website like https://community.rstudio.com than on a possible related (old) issue. Thank you

rstudio / rmarkdown