How do I add class attributes to a navbarPage in Shiny?

210 Views Asked by At

This is probably a very simple question (or looks like it should be) but it has me stumped. I am working on a Shiny app which uses the bslib package for theming. This is the skeleton code for the UI element:

ui <- fluidPage(
  
  theme = bs_theme(bootswatch = 'sandstone'),
  
  br(),
  
  navbarPage('Title',
             
             tabPanel('tp1', 'tp1 content'),
             tabPanel('tp2', 'tp2 content'),
             tabPanel('tp3', 'tp3 content'),
             
            )
  
)

This indeed results in the 'sandstone' theme being applied to the app. However, I would like to use the 'light' version of the navbar, as shown here: https://bootswatch.com/sandstone/

Looking at the HTML code I need to add the following class attributes to the navbarclass="navbar navbar-expand-lg navbar-light bg-light". Tried using a tags$style element, but the style does not get included into the navbar (gets applied to the content after).

I cannot seem to find how to do that in the context of the navbarPage element above. Any help would be much appreciated.

1

There are 1 best solutions below

0
Cruz Julián On

May be the tagAppendAttributes can be usefull. Try this.

ui <-
  fluidPage(
    theme = bs_theme(bootswatch = 'sandstone'),
    navs_bar(
      position = "static-top",
      collapsible = TRUE,
      tabPanel('tp1', 'tp1 content'),
      tabPanel('tp2', 'tp2 content'),
      tabPanel('tp3', 'tp3 content'),
    )        ,
  ) %>% 
  tagAppendAttributes(
    .cssSelector = "nav", 
    class = "navbar navbar-expand-lg navbar-light bg-light"
  )