Some right-aligned tabPanels in shiny

Question

Using navbarPage I would like to have some tabPanels to be right-aligned while the rest of tabPanels and navbarMenus to be left-aligned:

So, instead of this

library(shiny)    
ui =  tagList(
  navbarPage(
    title = "My app",
    navbarMenu("Left1",
               tabPanel("Subleft11"),
               tabPanel("Subleft12")),
    tabPanel("Left2"),
    tabPanel("Left3"),
    tabPanel("Right1"),
    tabPanel("Right2")
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

I would like to get something like this:

Solution from GyD works fine for tabsetPanel but I was not able to adapt it to navbarPage. I tried to add

tags$head(
    tags$style(HTML(
      ".navbar ul li:nth-child(4) { float: right; }
      .navbar ul li:nth-child(5) { float: right; }"
    ))),

but without desired effect.

Answer 1

You could do that with some css. This would be an easy example which aligns the 4th and 5th list elements inside the class navbar-nav a float: right;.

By including right: 150px; to the 4th child, you keep the tabs in correct order.

App.R

library(shiny)   
library(shinythemes)  

ui =  tagList(
    tags$head(tags$style(HTML("
                           .navbar-nav {
                           float: none !important;
                           }
                           .navbar-nav > li:nth-child(4) {
                           float: right;
                           right: 150px;
                           }
                           .navbar-nav > li:nth-child(5) {
                           float: right;
                           }
                           "))),
  navbarPage(
    title = "My app",
    theme = shinytheme("cerulean"),
    navbarMenu("Left1",
               tabPanel("Subleft11"),
               tabPanel("Subleft12")),
    tabPanel("Left2"),
    tabPanel("Left3"),

    tabPanel("Right1"),
    tabPanel("Right2")

    )
    )

server <- function(input, output, session) {}

shinyApp(ui, server)

Answer 2

Maybe something along these lines:

tags$head(
    tags$style(HTML(
    "
    .navbar-header { width: 10% }
    .navbar-nav { width: 90% }
    .navbar-nav>li:nth-child(4) { float: right; }
    .navbar-nav>li:nth-child(5) { float: right; }"
)))