Help, updates or improvements: shiny, bslib, bootstrap 4, navbarPage

[DavidJesse]

Hey everyone!

First of all, I am sorry for this very unspecific title but I just didn't know how I could have put it more concretely.
Also I would like to note directly that I don't know much about web development at all, so please apologize if I simply got things completely wrong and this topic might be redundant.

So my situation is the following:

I am currently aiming to develop an app with R Shiny and would like to use the navbarPage layout alongside with the new {bslib} package which also allows us to make use of bootstrap 4.
One issue that I am running into now is that the underlying classes and html code for the navbarpage are totally different between bootstrap 3 and bootstrap 4.
It's no problem if the only thing you want to customize are the fonts and colors, but it prevents me from customizing the appearance of the navbar further.

For example:
I'd like to have my tabs left aligned in the navbar and also add a button to the navbar which is right aligned.
With the bootstrap 3 version my approach has been to misuse the title (navbar header) argument and place an actionButton inside it. Then with some custom css I could align it to the right and adjust the paddings of it.
With bootstrap 4 that is not possible anymore since it is based on a different system.

My question is pretty open now and rather aims at obtaining different ideas, suggestions and comments for the following points:

• Can it be the case that the current version of shiny::navbarPage() is not perfectly suited to make use of the possibilities of the bootstrap 4 navbar effectively?
  • e.g I was able to align all tabs to the right or left but not only some of them (via bslib::bs_add_rules())
  • with the current version you can only place tabPanel() or navbarMenu() objects into navbarPage(). Would it be possible to have a less restrictive version?
• Would a wrapper function for alignment of tabs and other elements make sense? E.g.:

  • bs4_navbar_end <- function(..., id = NULL) {
       tags$div(
         class="collapse navbar-collapse justify-content-end",
         id = id,
         tags$ul(
           class = "navbar-nav",
           ...
         )
       )
    }
    

• Or do you have any other ideas/suggestions/comments?

I am very happy to hear your thoughts on this topic!

Cheers
David

[DavidJesse]

One idea that just came into my mind is to use insertUI() in the server to modify the navbarPage.
This approach seems a little bit sketchy to me since (in my case) it is based quite a bit on guessing which css selector I have to use but it works:

ui <- navbarPage("Navbar",
           tabPanel("Tab1", h3("First Tab")),
           tabPanel("Tab2", h3("Second Tab")),
           theme = bslib::bs_theme(version = 4))


server <- function(input, output, session) {
  insertUI(
    selector = '[role="navigation"]',
    where = "beforeEnd",
    ui = actionButton("submit", "Submit")
  )
}

shinyApp(ui, server)

[cpsievert]

It's very likely that in the next couple months we'll have a more official way to do this sort of thing (right aligned nav as well as inline nav items), probably via {bslib}

[cpsievert]

You can now do this properly in the dev version of bslib Add nav_item() and nav_spacer() for external links, inline forms, and alignment by cpsievert · Pull Request #319 · rstudio/bslib · GitHub

[DavidJesse]

Hey, I haven't tried it out yet, but it looks very promising. Thank you so much
Is using the new page_ functions from {bslib} mandatory for the new nav_ functions to work?

[cpsievert]

Is using the new page_ functions from {bslib} mandatory for the new nav_ functions to work?

No, you should be able to use any page function that includes Bootstrap 3 or newer (these page functions are thin wrappers around shiny's page functions that just provide different defaults).