How to utilise the space below a navlistPanel in shiny?

user_8487930 0
Viewed 368

I'm looking at how I can utilise the space below a navlistPanel().

Dummy code:

library(shiny)

ui <-  fluidPage(
    titlePanel("Navlist panel example"),
    
    navlistPanel(
      "Header",
      tabPanel("First",
               h3("This is the first panel")),
      tabPanel("Second",
               h3("This is the second panel")),
      tabPanel("Third",
               h3("This is the third panel"))
    )
  )
    
server <- function(input, output) {
}

shinyApp(ui, server)

Would produce something like below. I want to be able to insert text or other features in the highlighted area in red. I suppose this question could also apply if navlistPanel() was sidebarPanel(), but I know it's possible to be able to put more things inside the actual sidebar panel itself, compared to the navlistPanel() which only takes tabPanel()s or plain text elements.

enter image description here Edit:

library(shiny)

ui <- fluidPage(
  titlePanel("Navlist panel example"),
  div(navlistPanel(
    "Header",
    tabPanel("First",
             h3("This is the first panel"),
             plotOutput("myPlot")),
    tabPanel("Second",
             h3("This is the second panel")),
    tabPanel("Third",
             h3("This is the third panel"))
  ), 
  column(4, "foobarbaz"))
)


server <- function(input, output) {
  output$myPlot <- renderPlot(plot(1:10))
}

shinyApp(ui, server)

enter image description here

shiny r html
1 Answers

You can simply place the additional content outside of the navlistPanel call or wrap it in a div-tag: library(shiny)

ui <- fluidPage(
  titlePanel("Navlist panel example"),
  navlistPanel(
    "Header",
    tabPanel("First",
             h3("This is the first panel")),
    tabPanel("Second",
             h3("This is the second panel")),
    tabPanel("Third",
             h3("This is the third panel"))
  ), 
  column(4, plotOutput("myPlot"))
  )

server <- function(input, output) {
  output$myPlot <- renderPlot(plot(1:10))
}

shinyApp(ui, server)

# div-tag -----------------------------------------------------------------

library(shiny)

ui <- fluidPage(
  titlePanel("Navlist panel example"),
  div(navlistPanel(
    "Header",
    tabPanel("First",
             h3("This is the first panel")),
    tabPanel("Second",
             h3("This is the second panel")),
    tabPanel("Third",
             h3("This is the third panel"))
  ), 
  column(4, plotOutput("myPlot")))
  )


server <- function(input, output) {
  output$myPlot <- renderPlot(plot(1:10))
}

shinyApp(ui, server)

result

After @Nautica's edit:

library(shiny)

ui <- fluidPage(
  titlePanel("Navlist panel example"),
  navlistPanel(
    "Header",
    tabPanel("First",
             h3("This is the first panel"),
             plotOutput("myPlot")),
    tabPanel("Second",
             h3("This is the second panel")),
    tabPanel("Third",
             h3("This is the third panel"))
  ), 
  column(4, "foobarbaz", style = "margin-top: -220px;")
)


server <- function(input, output) {
  output$myPlot <- renderPlot(plot(1:10))
}

shinyApp(ui, server)
user_98413890
Related