Side bar at the top

shiny
1

In the below application, can we have the sidebar at the the top? Wanted to check if its possible to achieve? Currently it is at the side.

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(disable = TRUE
  ),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Tab1", tabName = "tab1"),
      menuItem("Tab2", tabName = "tab2")
    )
  ),
  dashboardBody(
    tabItems(
      tabItem(tabName = "tab1", 
              h1("tab1")
      ),
      tabItem(tabName = "tab2",
              h1("tab2"),
              textInput("foo", "Type something", "")
      )
    )
  )
)

server <- shinyServer(function(input, output, session) {
  output$top <- renderMenu({
    tags$li(class = "dropdown",
            if (input$foo == "") {
              "text1"
            } else {
              "text2"
            }
    )
  })
})

shinyApp(ui, server)
2

This will get you in the right direction

library(shiny)
library(shinydashboard)

header <- dashboardHeader(
  tags$li(
    class = "dropdown",
    tags$style(HTML("
          .navbar-custom-menu{float:left !important;}
          .sidebar-menu{display:flex;align-items:baseline;}"))
  ),

  tags$li(
    class = "dropdown",
    sidebarMenu(
      id = "tablist",
      menuItem("Tab1", tabName = "tab1"),
      menuItem("Tab2", tabName = "tab2")
    )
  )
)

body <- dashboardBody(
  tabItems(
    tabItem(
      tabName = "tab1",
      h1("tab1")
    ),
    tabItem(
      tabName = "tab2",
      h1("tab2"),
      textInput("foo", "Type something", "")
    )
  )
)

sidebar <-
  ui <- dashboardPage(
    header = header,
    sidebar = dashboardSidebar(disable = TRUE),
    body = body,
    title = NULL,
    skin = "black"
  )

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

shinyApp(ui, server)
3

You could use tabsetPanel() instead of the sidebard and get selectors on the top of that tab areas:

dashboardSidebar(disable = TRUE
  ),
  dashboardBody(
    tabsetPanel(
      tabPanel(tabName = "tab1", 
              h1("tab1")
      ),
      tabPanel(tabName = "tab2",
              h1("tab2"),
              textInput("foo", "Type something", "")
      )
    )
1 Like
4

Thanks Nir. This is working. But the same thing I tried to apply to the bottom application. But did not work. So basically, the side black bar should be shifted to top. Not sure if we can achieve this. Can you please guide me?

 library(shiny)
  library(shinydashboard)
  library(shinydashboardPlus)
  
  shinyApp(
    ui = dashboardPagePlus(
      header = dashboardHeaderPlus(
        title = tagList(
          span(class = "logo-lg", "shiny"), 
          img(src = "https://image.flaticon.com/icons/svg/204/204074.svg")),
        enable_rightsidebar = TRUE,
        rightSidebarIcon = "gears"
      ),
      sidebar = dashboardSidebar(),
      body = dashboardBody(),
      rightsidebar = rightSidebar(),
      title = "DashboardPage"
    ),
    server = function(input, output) { }
  )
5

Hi Vinay,
In this example you have a left side bar and no tab menu along the top.
do you want
a) no left side bar, and the tab menu along the top
or
b) both a left side bar, and the tab menu along the top
?

6

Thanks for the reply. Actually, i do not need left side bar at all. I need the top bar with tabs :slight_smile: is it possible to achieve?

7

Thanks, I'm not sure if the left side bar can be removed easily from shinydashboardPlus.
What drew you to the Plus version, was it some particular feature ? there might be a trade-off...

8

Exactly. In plus version even I though the same. I am working on a larger application that is already built. I need to tweak a little bit. So right now, it is not possible to change the entire structure with tabpanels. So i thought of asking here:) is it not possible to achieve through bootstrap and all?:slight_smile:

9

Sorry, you didnt explain, why you would wish for dashboardPlus, when we showed a way to do it with dashboard ?
If you did it the dashboard way, what would you regret from not using dashboardPlus, is there anything that you like from dashboardPlus, that you dont get from dashboard?

10

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.