rshinynavbarbslibbrand.yml

How to modify the background color of a bslib navbar using brand.yml?


I have a .yml file I would like to reuse for multiple shiny apps, so I have created a custom _brand.yml. In this case, I would like to colour the background of my page header purple. I know this is possible with navbar_options argument in page_navbar() but I would like to keep all formatting in a yml file.

theme:
  bootswatch: pulse

navbar:
  type: light
  fg: white
  bg: purple

I cannot get this to work with a simple shiny App:

library(shiny)
library(bslib)

ui <- page_navbar(
  title = "background is now purple",
  theme = bs_theme(),
  navset_card_underline(nav_panel('plot1', plotOutput('distPlot')))
)

server <- function(input, output) {
  
  output$distPlot <- renderPlot({
    # generate bins based on input$bins from ui.R
    plot(mtcars)
  })
}
shinyApp(ui = ui, server = server)

I would also like to insert a logo in top left of nav bar. I know I need to define this in .yml as below but I have not managed to get this to work.

logo: 
  small: my_logo.svg

Solution

  • brand.yml has a defaults section, you can define the navbar background color using defaults.bootstrap:

    _brand.yml

    defaults:
      bootstrap:
        defaults:
          navbar-bg: purple
    

    app.R

    library(shiny)
    library(bslib)
    
    ui <- page_navbar(
      title = "background is now purple using brand.yml"
    )
    
    shinyApp(ui = ui, server = \(...){})
    

    enter image description here


    Regarding the logo topic: This is currently not possible to set up directly using brand.yml (although the docs seem to imply it). There is a recent commit to the examples section of the GitHub repository which could maybe be applied to your case, but it's not very straightforward. As long as this is not implemented, you might consider to add the logo without brand.yml.