Aligning Multiple Action Buttons in Shiny Dashboard Header

Question

This SO post describes how to add an actionButton to the top right of the dashboardHeader in a shinydashboard. I would like to add two action buttons next to each other in the dashboardHeader. How can I place the buttons within the header bar so that they do not overlap? More specifically, is there a way to move a button to the left and centre it vertically within the dashboardHeader?

Answer 1

Perhaps you are looking for this

ui <- dashboardPage(
  dashboardHeader(title = div("Testing Work Space", 
                              img(src = 'YBS.png',
                                  title = "Just a Test Application", height = "30px"),
                              style = "position: relative; margin:-3px 0px 0px 5px; display:right-align;"
                             ), 
  titleWidth=350,
  tags$li(div(
            img(src = 'YBS.png',
                title = "A Test Graphics Application", height = "30px"),
            style = "padding-top:15px; padding-right:100px;"),
          class = "dropdown"),
  tags$li(a(href = 'http://www.cnn.com',
            icon("power-off"),
            title = "CNN Home"),
          class = "dropdown"),
  tags$li(a(href =  'https://en.wikipedia.org/wiki/Mouse', 
            tags$img(src = 'mouse.png', height = "30px"),
            title = "Mouse Home"),
          class = "dropdown")
  ),
  dashboardSidebar(),
  dashboardBody()
)

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

shinyApp(ui, server)

You can adjust padding and margin to suit your needs. Also, you can add multiple actionButtons.

Answer 2

I can't answer your question directly because I have only used Flexdashboard. But there is a shinyWidgets package that contains a DropDown widget that allows you to embed multiple widgets into the DropDown. So if the dashboard header only allows a single widget, you could use a dropdown widget to access multiple widgets indirectly See:

http://shinyapps.dreamrs.fr/shinyWidgets/

And the dropdowns & sweetalert menu item. The sample dropdowns there contain links to the underlying shinyWidgets code.