how do i render output (e.g. plots) in different custom written navs/tabs in a shiny app?

I would like to build something that equals the functionality of the shiny functions navbarPage() and navbarMenu() to split my app into different sections with different plots etc.. However when you run the example app below, you will notice that plot in the first tab (NAVONE - which is not hidden by default) will get rendered by click the corresponding link, but the plot in the second tab (NAVTWO) will not get rendered by clicking the corresponding link. Its not clear to me what differs both tabs.

if (interactive()) {
  options(device.ask.default = FALSE)
  ui = fluidPage(
    tags$div(class = 'nav',
             tags$button('NAVONE', class = 'navlinks', id = "defaultOpenNav", onclick = 'openNav(event, "NAVONE")'),
             tags$button('NAVTWO', class = 'navlinks', onclick = 'openNav(event, "NAVTWO")')),
    tags$div(class = 'navcontent', id = 'NAVONE',
             actionLink(inputId = "actnOne", "click to create plot for nav one"),
             plotOutput(outputId = "plotOne")),
    tags$div(class = 'navcontent', id = 'NAVTWO',
             actionLink(inputId = "actnTwo", "click to create plot for nav two"),
             plotOutput(outputId = "plotTwo")),
      "function openNav(evt, NavToOpen) {
        // Declare all variables
        var i, navcontent, navlinks;

        // Get all elements with class = 'navcontent' and hide them
        navcontent = document.getElementsByClassName('navcontent');
        for (i = 0; i < navcontent.length; i++) {
        navcontent[i].style.display = 'none';

        // Get all elements with class = 'tablinks' and remove the class 'active'
        document.getElementById(NavToOpen).style.display = 'block';
        evt.currentTarget.className += ' active';

        // navcontent to be open by default
  server = function(input, output, session){
    observeEvent(input$actnOne, {
      output$plotOne = renderPlot({
    observeEvent(input$actnTwo, {
      output$plotTwo = renderPlot({
  shinyApp(ui, server)

Are there generally some information on the web that gives me some insight how shiny functions especially navbarPage() and navbarMenu() work under the hood?

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.