Styling of Lumen navbar not as expected

[PaulJWright]

Describe the problem

The navbar styling of Lumen from bootswatch is not consistent with the expected navbar: https://bootswatch.com/lumen/. For other themes the output is as expected.

library(shiny)
library(bslib)

ui <- page_navbar(
  theme = bs_theme(bg = "black", fg = "white"),
  nav_panel("Dashboard",
            sidebarLayout(
              sidebarPanel(
                h3("Sidebar"),
                p("Sidebar content goes here."),
                actionButton("btn1", "Action 1"),
                actionButton("btn2", "Action 2", class = "btn-primary")
              ),
              mainPanel(
                h1("Heading 1"),
                h2("Heading 2"),
                p(
                  "Paragraph text;",
                  tags$a(href = "https://www.rstudio.com", "a link")
                ),
                p(
                  actionButton("cancel", "Cancel"),
                  actionButton("continue", "Continue", class = "btn-primary")
                )
              )
            )
  ),
  nav_panel("Settings",
            sidebarLayout(
              sidebarPanel(
                h3("Settings Sidebar"),
                checkboxInput("check1", "Enable Feature 1", FALSE),
                checkboxInput("check2", "Enable Feature 2", TRUE)
              ),
              mainPanel(
                h2("Settings Page"),
                p("Adjust your settings here.")
              )
            )
  )
)

if (interactive()) {
  run_with_themer(shinyApp(ui, function(input, output) {}))
}

Session Info

─ Session info ───────────────────────────────────────────────────────────────────────────────────
 setting  value
 version  R version 4.4.2 (2024-10-31)
 os       macOS Sonoma 14.4
 system   aarch64, darwin20
 ui       RStudio
 language (EN)
 collate  en_US.UTF-8
 ctype    en_US.UTF-8
 tz       Europe/London
 date     2025-03-08
 rstudio  2024.12.1+563 Kousa Dogwood (desktop)
 pandoc   NA
 quarto   1.5.57 @ /Applications/RStudio.app/Contents/Resources/app/quarto/bin/quarto
─ Packages ───────────────────────────────────────────────────────────────────────────────────────

! package           * version    date (UTC) lib source

P bslib             * 0.9.0.9000 2025-03-08 [?] Github (rstudio/bslib@b7a02e7)

P cachem              1.1.0      2024-05-16 [?] CRAN (R 4.4.0)

P callr               3.7.6      2024-03-25 [?] CRAN (R 4.4.0)

P class               7.3-22     2023-05-03 [?] CRAN (R 4.4.2)

P classInt            0.4-11     2025-01-08 [?] CRAN (R 4.4.1)

P cli                 3.6.3      2024-06-21 [?] CRAN (R 4.4.0)

P colorspace          2.1-1      2024-07-26 [?] CRAN (R 4.4.0)

P crosstalk           1.2.1      2023-11-23 [?] RSPM

P data.table          1.17.0     2025-02-22 [?] RSPM

P DBI                 1.2.3      2024-06-02 [?] CRAN (R 4.4.0)

P devtools            2.4.5      2022-10-11 [?] CRAN (R 4.4.0)

P digest              0.6.37     2024-08-19 [?] CRAN (R 4.4.1)

P dplyr             * 1.1.4      2023-11-17 [?] CRAN (R 4.4.0)

P e1071               1.7-16     2024-09-16 [?] CRAN (R 4.4.1)

P ellipsis            0.3.2      2021-04-29 [?] CRAN (R 4.4.0)

P evaluate            1.0.3      2025-01-10 [?] RSPM

P fansi               1.0.6      2023-12-08 [?] CRAN (R 4.4.0)

P fastmap             1.2.0      2024-05-15 [?] CRAN (R 4.4.0)

P fs                  1.6.5      2024-10-30 [?] CRAN (R 4.4.1)

P generics            0.1.3      2022-07-05 [?] CRAN (R 4.4.0)

P geojsonsf         * 2.0.3      2022-05-30 [?] RSPM

P ggplot2           * 3.5.1      2024-04-23 [?] CRAN (R 4.4.0)

P glue              * 1.8.0      2024-09-30 [?] CRAN (R 4.4.1)

P gtable              0.3.6      2024-10-25 [?] CRAN (R 4.4.1)

P htmltools           0.5.8.1    2024-04-04 [?] CRAN (R 4.4.0)

P htmlwidgets         1.6.4      2023-12-06 [?] CRAN (R 4.4.0)

P httpuv              1.6.15     2024-03-26 [?] CRAN (R 4.4.0)

P httr              * 1.4.7      2023-08-15 [?] CRAN (R 4.4.0)

P jquerylib           0.1.4      2021-04-26 [?] CRAN (R 4.4.0)

P jsonlite          * 1.8.9      2024-09-20 [?] CRAN (R 4.4.1)

P KernSmooth          2.23-24    2024-05-17 [?] CRAN (R 4.4.2)

P knitr               1.49       2024-11-08 [?] CRAN (R 4.4.1)

P later               1.4.1      2024-11-27 [?] CRAN (R 4.4.1)

P lazyeval            0.2.2      2019-03-15 [?] RSPM

P leaflet           * 2.2.2      2024-03-26 [?] RSPM

P leaflet.extras    * 2.0.1      2024-08-19 [?] CRAN (R 4.4.1)

P leaflet.providers   2.0.0      2023-10-17 [?] RSPM

P lifecycle           1.0.4      2023-11-07 [?] CRAN (R 4.4.0)

P magrittr            2.0.3      2022-03-30 [?] CRAN (R 4.4.0)

P memoise             2.0.1      2021-11-26 [?] CRAN (R 4.4.0)

P mime                0.12       2021-09-28 [?] CRAN (R 4.4.0)

P miniUI              0.1.1.1    2018-05-18 [?] CRAN (R 4.4.0)

P munsell             0.5.1      2024-04-01 [?] CRAN (R 4.4.0)

P pillar              1.9.0      2023-03-22 [?] CRAN (R 4.4.0)

P pkgbuild            1.4.6      2025-01-16 [?] RSPM

P pkgconfig           2.0.3      2019-09-22 [?] CRAN (R 4.4.0)

P pkgload             1.4.0      2024-06-28 [?] CRAN (R 4.4.0)

P plotly            * 4.10.4     2024-01-13 [?] CRAN (R 4.4.0)

P plumber           * 1.2.2      2024-03-26 [?] CRAN (R 4.4.0)

P processx            3.8.4      2024-03-16 [?] CRAN (R 4.4.0)

P profvis             0.4.0      2024-09-20 [?] CRAN (R 4.4.1)

P promises            1.3.2      2024-11-28 [?] CRAN (R 4.4.1)

P proxy               0.4-27     2022-06-09 [?] CRAN (R 4.4.0)

P ps                  1.8.1      2024-10-28 [?] CRAN (R 4.4.1)

P purrr               1.0.4      2025-02-05 [?] RSPM

P R6                  2.5.1      2021-08-19 [?] CRAN (R 4.4.0)

P Rcpp                1.0.14     2025-01-12 [?] CRAN (R 4.4.1)

P remotes             2.5.0      2024-03-17 [?] CRAN (R 4.4.0)

renv                1.0.11     2024-10-12 [1] CRAN (R 4.4.1)

P rlang               1.1.4      2024-06-04 [?] CRAN (R 4.4.0)

P rstudioapi          0.17.1     2024-10-22 [?] CRAN (R 4.4.1)

P sass                0.4.9      2024-03-15 [?] CRAN (R 4.4.0)

P scales              1.3.0      2023-11-28 [?] CRAN (R 4.4.0)

P sessioninfo         1.2.3      2025-02-05 [?] RSPM

P sf                * 1.0-19     2024-11-05 [?] CRAN (R 4.4.1)

P shiny             * 1.10.0     2024-12-14 [?] CRAN (R 4.4.2)

P shinycssloaders   * 1.1.0      2024-07-30 [?] CRAN (R 4.4.0)

P shinyjs           * 2.1.0      2021-12-23 [?] CRAN (R 4.4.0)

P shinyWidgets      * 0.9.0      2025-02-21 [?] CRAN (R 4.4.2)

P stringi             1.8.4      2024-05-06 [?] CRAN (R 4.4.0)

P swagger             5.17.14.1  2024-06-28 [?] CRAN (R 4.4.1)

P tibble              3.2.1      2023-03-20 [?] CRAN (R 4.4.0)

P tidyr               1.3.1      2024-01-24 [?] CRAN (R 4.4.0)

P tidyselect          1.2.1      2024-03-11 [?] CRAN (R 4.4.0)

P units             * 0.8-5      2023-11-28 [?] CRAN (R 4.4.0)

P urlchecker          1.0.1      2021-11-30 [?] CRAN (R 4.4.0)

P usethis             3.1.0      2024-11-26 [?] CRAN (R 4.4.1)

P utf8                1.2.4      2023-10-22 [?] CRAN (R 4.4.0)

P uuid              * 1.2-1      2024-07-29 [?] CRAN (R 4.4.0)

P vctrs               0.6.5      2023-12-01 [?] CRAN (R 4.4.0)

P viridisLite         0.4.2      2023-05-02 [?] CRAN (R 4.4.0)

P webutils            1.2.2      2024-10-04 [?] CRAN (R 4.4.1)

P withr               3.0.2      2024-10-28 [?] CRAN (R 4.4.1)

P xfun                0.50       2025-01-07 [?] RSPM

P xtable              1.8-4      2019-04-21 [?] CRAN (R 4.4.0)
[1] /Users/paulwright/Documents/work/ADD-TREES/RShiny_demo/renv/library/macos/R-4.4/aarch64-apple-darwin20

[2] /Users/paulwright/Library/Caches/org.R-project.R/R/renv/sandbox/macos/R-4.4/aarch64-apple-darwin20/f7156815

── Packages attached to the search path.

P ── Loaded and on-disk path mismatch.

[gadenbuie]

Hi @PaulJWright, in bslib v0.9.0, we revamped how navbar options, like background color, can be set with a new navbar_options() function. There's a section in the documentation for that function that describes how to set the navbar background colors to match the examples shown in the Bootswatch pages: https://rstudio.github.io/bslib/dev/reference/navbar_options.html#navbar-style-with-bootstrap-and-bootswatch-themes.

In short, you can use the following for lumen:

ui <- page_navbar(
  theme = bs_theme(preset = "lumen"),
  navbar_options = navbar_options(class = "bg-primary", theme = "dark"),
  # ... rest of your app code ...
)

[PaulJWright]

Hi @PaulJWright, in bslib v0.9.0, we revamped how navbar options, like background color, can be set with a new navbar_options() function. There's a section in the documentation for that function that describes how to set the navbar background colors to match the examples shown in the Bootswatch pages: https://rstudio.github.io/bslib/dev/reference/navbar_options.html#navbar-style-with-bootstrap-and-bootswatch-themes.

Hi @gadenbuie, thanks for your response.

The issue is seems a bit more fundamental. The default behaviour doesn't match the theme https://bootswatch.com/lumen/. I would expect consistent behaviour regardless of theme. when selecting sketchy, the output does indeed match the expected theme (https://bootswatch.com/sketchy/).

[gadenbuie]

The default behaviour doesn't match the theme bootswatch.com/lumen.

Agreed. The themes that do match Bootswatch by default are happy accidents. Unfortunately, we can't offer the flexibility to create all of the navbar styles shown in the Bootswatch pages and have all of the defaults be perfect out-of-the-box.

For nearly all Bootswatch themes, navbar_options(class = "bg-primary", theme = "dark") is a good default choice, but that's not something we can globally make the default value.

I'll leave this issue open so that we take another look at Lumen in the future. But I'd place higher priority on updating the theme picker UI to surface the class-based styling choices that are shown in the Bootswatch docs.

[PaulJWright]

I'll leave this issue open so that we take another look at Lumen in the future. But I'd place higher priority on updating the theme picker UI to surface the class-based styling choices that are shown in the Bootswatch docs.

Thanks!