A header in page_navbar adds a lot of white space to the Shiny app

Question

I am trying to add my company's logo to a Shiny app using bslib and page_navbar. I am using the header argument to page_navbar to supply an imageOutput ui element.

This does add the image to the page, however it also adds a lot of white space below the navbar.

How can I accomplish this without all the white space?

Here is a minimal example. The image link will be broken in this example, but the problem is apparent. Thank you.

library(shiny)
library(DT)
library(bslib)

ui <- page_navbar(
  title = "test navbar",
  header = imageOutput("logo"),
  nav_panel("mtcars", DTOutput("mtcars")),
) 

server <- function(input, output) {
  output$logo <- renderImage(list(src = "broken", align = "right", height = 100, width = 100), deleteFile = FALSE)
  output$mtcars <- renderDT({mtcars})
}

shinyApp(ui = ui, server = server)

Answer 1

imageOutput has a height parameter whose default is set to 400px (see ?imageOutput). You can edit this parameter for reducing the whitespace between your navbar and your table. See the example below.

library(shiny)
library(DT)
library(bslib)

ui <- page_navbar(
    title = "test navbar",
    header = imageOutput("logo", height = "150px"),
    nav_panel("mtcars", DTOutput("mtcars")),
)

server <- function(input, output) {
    output$logo <-
        renderImage(list(
            src = "broken",
            align = "right",
            height = 100,
            width = 100
        ),
        deleteFile = FALSE)
    output$mtcars <- renderDT({
        mtcars
    })
}

shinyApp(ui = ui, server = server)