Home Button in Header in R shiny Dashboard

Question

I am trying to add a home button in the header of my Shiny app so that whenever anyone clicks it from any tab, it will redirect to the first page. Currently I am using one actionButton in every tab with observeEvent to go back to first page.

I am not able to add any actionButton in the header section of Shiny app. Is there any way around for this feature?

It is something like this: Sample Shiny Look

Reproducible Code:

library(shiny)
library(shinydashboard)
library(shinyjs)
options(shiny.maxRequestSize=1000*1024^2)

app <- shinyApp(
  a <- dashboardPage(
    dashboardHeader(title = "Sample Shiny", titleWidth=1450),
    dashboardSidebar(sidebarMenu(id='tabs',
                                 menuItem("Welcome", tabName = "welcome"),
                                 menuItem("Tab1", tabName = "tab1"),
                                 menuItem("Tab2",
                                      menuSubItem("Tab2_1", tabName = "tab2_1"),
                                      menuSubItem("Tab2_2", tabName = "tab2_2"))
    )
    ),
    dashboardBody(  shinyjs::useShinyjs(),
                    tabItems(
                      tabItem(tabName="welcome", tabPanel(title = "Score",fluidRow(valueBoxOutput("box_01"),valueBoxOutput("box_02")))),
                      # First tab content
                      tabItem(tabName = "tab1",actionButton("homeButton1", "Home")),
                      # Second tab content
                      tabItem(tabName = "tab2_1",tabsetPanel(id = "test",tabPanel(title = "tab2_1",actionButton("homeButton2", "Home"),actionButton("NextButton2", "Tab3")))),
                      tabItem(tabName = "tab2_2",tabsetPanel(id = "outputTabset",tabPanel(title = "Tab 3",actionButton("homeButton3", "Home"))))         
    )
  )),

  b<-shinyServer(function(input, output, session) {

    ##########Links from first page
    output$box_01 <- renderValueBox({
      box1<-valueBox(value=01,
                 icon = icon("database",lib="font-awesome")
                 ,width=NULL
                 ,color = "blue"
                 ,href="#"
                 ,subtitle=HTML("<b>Tab 1</b>")
      )
      box1$children[[1]]$attribs$class<-"action-button"
      box1$children[[1]]$attribs$id<-"button_box_01"
      return(box1)

    })

    output$box_02 <- renderValueBox({
      box2<-valueBox(value=02,
                 icon = icon("user-secret",lib="font-awesome")
                 ,width=NULL
                 ,color = "yellow"
                 ,href="#"
                 ,subtitle=HTML("<b>Tab 2</b>")
      )
      box2$children[[1]]$attribs$class<-"action-button"
      box2$children[[1]]$attribs$id<-"button_box_02"
      return(box2)

    })

    observeEvent(input$button_box_01,{
      if(input$button_box_01[1]>0){
        newtab <- switch(input$tabs,
                     "welcome" = "tab1",
                     "tab1" = "welcome"
        )
        updateTabItems(session, "tabs", newtab)
      }  })

    observeEvent(input$button_box_02,{
      if(input$button_box_02[1]>0){
        newtab <- switch(input$tabs,
                     "welcome" = "tab2_1",
                     "tab2_1" = "welcome"
    )
    updateTabItems(session, "tabs", newtab)
  }  })


### HomeButtons

observeEvent(input$homeButton1,{
  newtab <- switch(input$tabs,
                   "welcome" = "tab1",
                   "tab1" = "welcome"
  )
  updateTabItems(session, "tabs", newtab)
})
observeEvent(input$homeButton2,{
  newtab <- switch(input$tabs,
                   "welcome" = "tab2_1",
                   "tab2_1" = "welcome"
  )
  updateTabItems(session, "tabs", newtab)
    })

    observeEvent(input$NextButton2,{
      newtab <- switch(input$tabs,
                   "tab2_2" = "tab2_1",
                   "tab2_1" = "tab2_2"
      )
      updateTabItems(session, "tabs", newtab)
    })

    observeEvent(input$homeButton3,{
      newtab <- switch(input$tabs,
                   "welcome" = "tab2_2",
                   "tab2_2" = "welcome"
      )
      updateTabItems(session, "tabs", newtab)
    })


#######SideBar Disable

    addClass(selector = "body", class = "sidebar-collapse")


    })
        )

shiny::runApp(app,launch.browser=TRUE,host="0.0.0.0",port=6105)

some hints in this question, but I guess it's not simple (need to use some javascript/html): https://stackoverflow.com/q/28967949/3871924 — agenis, Nov 30 '17 at 10:35

score 10 · Accepted Answer · answered Nov 30 '17 at 11:22

See the following solution. You need to style the position with CSS, still. Key is to put the actionButton into the header with tags$li(class = "dropdown", ...), otherwise dashboardHeader will not accept it:

ui <- dashboardPage(
  dashboardHeader(title = "Demo", tags$li(class = "dropdown", actionButton("home", "Home"))),
  dashboardSidebar(sidebarMenu(id = "sidebar", # id important for updateTabItems
    menuItem("Home", tabName = "home", icon = icon("house")),
    menuItem("Tab1", tabName = "tab1", icon = icon("table")),
    menuItem("Tab2", tabName = "tab2", icon = icon("line-chart")),
    menuItem("Tab3", tabName = "tab3", icon = icon("line-chart")))
  ),

  dashboardBody(
    tabItems(
      tabItem("home", "This is the home tab"),
      tabItem("tab1", "This is Tab1"),
      tabItem("tab2", "This is Tab2"),
      tabItem("tab3", "This is Tab3")
  ))
)
server = function(input, output, session){
 observeEvent(input$home, {
   updateTabItems(session, "sidebar", "home")
 })
}
shinyApp(ui, server)

score 5 · Answer 2 · answered Dec 06 '17 at 15:37

Here's an option using javascript and a home icon which fits into the header nicely:

dashboardHeader(title = "Your Title",
               tags$li(a(onclick = "openTab('home')",
                        href = NULL,
                        icon("home"),
                        title = "Homepage",
                        style = "cursor: pointer;"),
                      class = "dropdown",
                      tags$script(HTML("
                                       var openTab = function(tabName){
                                       $('a', $('.sidebar')).each(function() {
                                       if(this.getAttribute('data-value') == tabName) {
                                       this.click()
                                       };
                                       });
                                       }")))
)

Change home in the openTab('home') part to whatever your home tab is called and it will switch to that tab when clicked.

Home Button in Header in R shiny Dashboard

2 Answers2

Linked