How to add dropdown menu on tab / tabset [rmarkdown / bootstrap]

Question

Documentation for Bootswatch suggests I can use a dropdown menu from a tab in a tabset:

How can I achieve this with Rmarkdown? I've tried:

# SECTION 1 {.tabset .tabset-fade}

## Section 1.1 

## Section 1.2 {????something here?????}
 ### Section 1.2.1  <<<<<<<<< want this to appear under the dropdown menu

For now, I don't think this can be achieved using just rmarkdown. However, you can produce an HTML document with RMarkdown and then tweak the HTML to achieve a dropdown menu. I've filed a [feature request issue](https://github.com/rstudio/rmarkdown/issues/1116) on the RMarkdown github page which goes into more detail. — bschneidr, Aug 14 '17 at 14:26
For now, you can either tweak the HTML to produce a document or use [the bsselectR package](http://walkerke.github.io/2016/12/rmd-dropdowns/) which unfortunately seems to be in a somewhat-stalled development. — bschneidr, Aug 14 '17 at 14:31
Thanks for opening the request @BIQS. I did not know I could do that. If you want to add the above as an answer, please do so — Dan, Aug 14 '17 at 14:38

score 13 · Accepted Answer · answered Dec 06 '18 at 11:30

13

This is now available within the development version of rmarkdown, which you can install this via devtools::install_github("rstudio/rmarkdown"). To add a dropdown menu, you must add .tabset-dropdown to the class header as follows:

---
output: html_document
---

# Heading {.tabset .tabset-dropdown}

## Dropdown 1

## Dropdown 2

## Dropdown 3 

## Dropdown 4

answered Dec 06 '18 at 11:30

Michael Harper

14,721
2
60
84

5

thank you Michael, I have a problem with the arrow, do you know how to correct this : https://imgur.com/a/DxJO8xT – John Smith Feb 01 '19 at 16:43
Same problem here! – Ilproff_77 Jun 25 '19 at 15:11
same problem here – Corrado Jul 24 '19 at 04:00

score 6 · Answer 2 · answered Aug 14 '17 at 15:08

For now, I don't think this can be done using just rmarkdown. However, you can produce an HTML document with a tabset section using rmarkdown and then tweak the HTML to convert the tab set to a dropdown menu. Alternatively, you can use the bsselectR package, which is unfortunately still in a somewhat-stalled development.

Below is an example of how you'd make an HTML document with rmarkdown and replace a tab set with a dropdown menu.

First, you'd write your rmarkdown document and then knit it to HTML.

---
title: "Tabset Example"
output: html_document
---

# The Tabset Section {.tabset .tabset-fade}

## First Tab
Here is the first tab's content.

## Second Tab
Here is the second tab's content
```

Then, in the resultant HTML file, you'd find this section of HTML:

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
        <a role="tab" data-toggle="tab" href="#first-tab" aria-controls="first-tab">First Tab</a>
    </li>
    <li role="presentation">
        <a role="tab" data-toggle="tab" href="#second-tab" aria-controls="second-tab">Second Tab</a>
    </li>
</ul>

and replace it with this HTML:

 <ul class="nav nav-tabs" role="tablist">
     <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
          Choose a Tab <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li class=""><a href="#first-tab" data-toggle="tab" aria-expanded="false" aria-controls="first-tab">First Tab</a></li>
          <li class=""><a href="#second-tab" data-toggle="tab" aria-expanded="false" aria-controls="second-tab">Second Tab</a></li>
        </ul>
     </li>
</ul>

Which should result in your tab set appearing as a dropdown menu, such as the following:

Seyma Kalay · Answer 3 · 2022-04-13T15:28:23.673

I got the same problem and I found this fantastic link. Changing the _site.yml as follows will help. But make sure - are inline, there is a space between - and text and click Tab for the - text under the menu:

name: my-website
output_dir: docs
navbar:
  title: My Website
  left:
  - text: Home
    href: index.html
  - text: Readings
    menu:
    - text: Module 1
      href: readings-module1.html
    - text: Module 2
      href: ./insert_a.pdf

How to add dropdown menu on tab / tabset [rmarkdown / bootstrap]

3 Answers3

Linked