R shiny navbarPage right aligned tabs - r

Question

By default, using navbarPage() in shiny creates a 'static top' bootstrap page (example). If I were writing the html for a webpage, I could add a <ul> element with a class of nav navbar-nav navbar-right where the navbar-right would move the tabs/menus to the right side of the navbar.
There doesn't seem to be a way to coerce this behavior directly through the framework - is there a clever known way to accomplish this?

Answer 1

The solution provided by K. Rohde, especially the edit, works for keeping it nearly pure Shiny. I discovered the insertAdjacentHTML javascript function and used it to create a right-hand text label. I guess it should be possible to make tabs that Shiny knows about and can use. In my case, I was wanting to put version information on the navbar, on the right-hand side. So, adding the disabled class was to avoid confusion.
library(shiny)
app <- shinyApp(
ui = shinyUI(
fluidPage(
navbarPage("Site Title",
tabPanel("v0.1"),
tabPanel("tab1"),
tabPanel("tab2")
),
HTML("<script>var parent = document.getElementsByClassName('navbar-nav');
parent[0].insertAdjacentHTML( 'afterend', '<ul class=\"nav navbar-nav navbar-right\"><li class=\"disabled\">v0.1</li></ul>' );</script>")
)
),
server = function(input, output, session){}
)
runApp(app)

Answer 2

You can use shinyjs package
library(shiny)
ui <- shinyUI(
navbarPage(
'Test',
id = 'menus',
tabPanel('Test',
shinyjs::useShinyjs()),
tabPanel("Summary"),
tabPanel("Table", value = 'table')
))
server <- function(input, output, session) {
shinyjs::addClass(id = "menus", class = "navbar-right")
}
shinyApp(ui, server)

Answer 3

Depends on how low your expectations are.
You can add css to your UI which aligns either your tabsets or your header to the right. Code:
app <- shinyApp(
ui = shinyUI(
fluidPage(
tags$head(
tags$style(HTML("
.navbar .navbar-nav {float: right}
.navbar .navbar-header {float: right}
"))
),
navbarPage("header",
tabPanel("tab1"),
tabPanel("tab2")
)
)
),
server = function(input, output, session){}
)
runApp(app)
Edit: The header argument of navbarPage also accepts regular div-containers. (E.g. a logo instead of plain text.) This can be exploitet to fill whole UI-Elements (e.g. buttons) into the header spot. Then of course you can float that to the right, while your tabs are aligned to the left.