R Shiny Navbarmenu

Creating navbarMenu and tabPanel using shiny modules

You can't use tagList() inside navbarPage() so you need to remove it from the module.

As a sidenote, you should define ns <- NS(id) at the beginning of the module and then wrap all ids in ns(). In your code, the table id was not wrapped in ns() so it wasn't displayed.

Fixed code:

### R/tabUI.R
tabUI <- function(id) {
  ns <- NS(id)
  
    navbarMenu("display table",
               tabPanel(ns("mtcars table"),
                        DT::dataTableOutput(ns("table"))
               )
    )
  
}

### R/tabServer.R
tabServer <- function(id) {
  moduleServer(id, function(input, output, session){
    output$table <- DT::renderDataTable(mtcars)
  })
}

### app.R
library(shiny)

ui <- navbarPage("dashboard",
                 tabUI("table1")
)

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

shinyApp(ui=ui, server=server)

Color change when tabPanel in navbarMenu is selected in R shiny

Add this style to the tags$style:

.dropdown-menu > .active > a {background-color:red;}

navbarMenu within navbarMenu in Shiny

pretty good question there!

I don't think there is another element you can use, but you can use JavaScript to make it work.

The only change I made to app.R is including the js file, using:
includeScript("script.js"). The real part is the script itself: we define 2 eventhandlers:

Clicking on a dropdown

Dropdowns are created by navbarMenu. They don't have tabPane connected to them, so all we need is to redefine the default behaviour by toggling the dropdown (open when closed, or close when in an opened state).

Clicking on a tab

There are 3 subtasks to consider when clicking on a tab:

Set active element in tabcontents

We need to show the appropriate tabPane that was clicked, in order to view the contents. The tabPane with a class: active is shown, so first, remove the active class from every tabPane, then add active class for the tab that was clicked.

Set active element in navbar

Same story, the active tab is visually represented in the navbar with darker grey color.

Close all dropdowns

After clicking on a specific tab from the navbarMenu it's probably a good idea to close all dropdowns, otherwise they would remain open.

script.js

$(document).ready(function(){
  $('.dropdown').on('click', function(e){
    $(this).toggleClass('open');
    
    e.stopPropagation();
    e.preventDefault();
  });
  
  $('[data-toggle=tab]').on('click', function(e){
    let dv = ($(this).attr('data-value'));
    
    //Set active element in tabcontents
    $('.tab-pane').removeClass('active');
    $('.tab-pane[data-value="' + dv + '"]').addClass('active');
    
    //Set active element in navbar
    $('a[data-toggle=tab]').parent().removeClass('active');
    $('a[data-value="' + dv + '"]').parent().addClass("active");
    
    //Close the dropdowns
    $('.dropdown').removeClass('open');
    
    e.stopPropagation();
    e.preventDefault();
  });
});

You can quickly try it out with runGist("https://gist.github.com/dgyurko/e1952c5ecbf9a1315b41b8d7ef1f7a8f")

Make sure to test in browser, as it doesn't seem to work properly in the RStudio Viewer!

Demo

Shiny navbarPage tab inside navbarMenu stays highlighted and cant be selected again

This appears to be a bug. If you switch the order of the navbarMenus (i.e. Missions then Plots) the same thing happens in the last item. It appears to be related to how Shiny determines which is the active tab when the page loads.

It seems like it ultimately has trouble removing the "active" class from the last item in the menu. If you manually remove it by inspecting the page, it works fine from then on out.

Not sure why it should matter, but when the app first loads, the default tab selected underlying HTML anchor element (the one for "Plots" > "Peacekeeping Activities") has the class "active dropdown-item". Whereas when you start selecting the other menu items they get the class "dropdown-item active". Could possibly be related to CSS order that makes a tab visible.

A workaround would be to put a tabPanel as the first element instead of a menu:

ui <- function(req) {
  navbarPage(
    theme = bs_theme(version = 5),
    header = "Nothing Here", #list(assets()),
    title = "Hello Stack",
    id = "main-menu",
    tabPanel(
      "Home",
      shiny::h3("Welcome to my app.")
    ),
    navbarMenu(
      "Plots",
...<remaining code>...

Adjust the height of NavBar menu in a shiny app

To adjust the height of the navbar menu, you have to differentiate between bootstrap versions. Probably in your shiny application bootstrap version 3.3.4 is used.
Then you can use:

tags$style(HTML('.navbar-nav > li > a, .navbar-brand {
                   padding-top:4px !important; 
                   padding-bottom:0 !important;
                   height: 25px;
                 }
                 .navbar {min-height:25px !important;}'))

see Decreasing height of bootstrap 3.0 navbar.

To modify the height you can modify this CSS code adjust the numbers within height: 25px and min-height:25px.

Reproducbile example:

library(shinydashboard)
library(shiny)

ui <- navbarPage("Navbar!",
         tags$head(
           tags$style(HTML('.navbar-nav > li > a, .navbar-brand {
                            padding-top:4px !important; 
                            padding-bottom:0 !important;
                            height: 25px;
                            }
                           .navbar {min-height:25px !important;}'))
         ),
           tabPanel("Plot",
                    sidebarLayout(
                      sidebarPanel(

                      ),
                      mainPanel(

                      )
                    )
           ),
           tabPanel("Summary"

           ),
           navbarMenu("More",
                      tabPanel("Table"
                      )

           )
)

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

shinyApp(ui, server)

Add external hyperlink to tabPanel or navbarMenu in r Shiny

It's tricky to add custom elements in a shiny navbar page but it can be done with some javascript. The following code should add your link to the dropdown menu in the navbar. Save it as a .js file in your app's base directory then include the script in your ui function.

navAppend.js in your app's base directory:

$(document).ready(function() {
  $(".navbar .container-fluid .navbar-nav .dropdown .dropdown-menu").append('<li><a href="https://google.com" target="_blank">Open Sales Gsheet</a></li>');
});

in your ui:

ui <- tagList(
  tags$head(includeScript("navAppend.js")),
  navbarPage(
    id = "navbar", 
    theme = shinytheme("yeti"),
    title = a("Home", href = "https://google.com", style = "color:white;"),  ## page title with hyperlink and browser tab title (works as intended)

    # nav menu the link will be added to
    navbarMenu(title = "Test Menu")
  )
)

---

Related Topics