shinydashboard adding a second navigation bar

Question

I am building a complex shiny app using shinydashboard. Our UI designer created a layout that has a second sidebar instead of subMenuItems. I have very little front end experience but it is my job to reproduce this in shiny. What is the best way to go about doing this?

My thought was to take the tabBox function and customize it so the navbar was along the side instead of over the top. With that it should be straightforward to adjust the css to make it look the way we want, and this keeps the simple tab control structure that tabBox comes with, instead of having to figure out something fancy myself.

I have managed to make the tabs stack vertically but don't know enough to be able to put them along the side. Below is what I have so far:

require(shiny)
require(shinydashboard)

fancy_tabs <- tabBox(width = 12,
                    id = "tabset1", height = "200px",
                    tabPanel("these go", box("wow it really works")),
                    tabPanel("on the side", "pls help")
)
fancy_tabs$children[[1]]$children[[1]]$attribs$class <- "nav flex-column shiny-tab-input"

ui <- dashboardPage(
  dashboardHeader( ),
  dashboardSidebar(
    sidebarMenu(
      menuItem("page 1")
    )
  ),
  dashboardBody(
    fancy_tabs
  )
)

server <- function(input, output, session){}

shinyApp(ui, server)

Any help on how to fix my current example would be great, or any other approaches to solving the second sidebar problem. Once I have a working example I will wrap this all up into its own function.

J Zak J Zak · Accepted Answer · 2019-04-09T22:02:02

I was able to get a solution using the verticalTabsetPanel and verticalTabPanel functions from the shinyWidgets package. I think there is a better solution out there but it would require more front-end experience than I have.

shinydashboard adding a second navigation bar

1 Answers