How to Show Tabpanels in bs4navbar() ?

[DivadNojnarg]

Do you mean a navbar navigation with tabs like for the sidebar?

[kmaheshkulkarni]

Do you mean navbar navigation with tabs like for the sidebar?

Yes Definitely

[kmaheshkulkarni]

@DivadNojnarg Have you got any solution on this?

[DivadNojnarg]

I don't have time to include it at the moment.

[kmaheshkulkarni]

I don't have time to include it at the moment.

No Problem man, Take your time Right now I use Button and drop-down button functions from Shinywidgets package

[DivadNojnarg]

I'll implement a better solution but here is a starting point:

library(shiny)
library(bs4Dash)

navbarTab <- function(tabName, ..., icon = NULL) {
  tags$li(
    class = "nav-item",
    tags$a(
      class = "nav-link",
      id = paste0("tab-", tabName),
      href = paste0("#shiny-tab-", tabName),
      `data-toggle` = "tab",
      `data-value` = tabName,
      icon,
      tags$p(...)
    )
  )
}

navbarMenu <- function(..., id = NULL) {
  if (is.null(id)) id <- paste0("tabs_", round(stats::runif(1, min = 0, max = 1e9)))

  tags$ul(
    class = "nav dropdown", 
    role = "menu",
    id = "sidebar-menu",
    ...,
    div(
      id = id,
      class = "sidebarMenuSelectedTabItem",
      `data-value` = "null",

    )
  )
}

shinyApp(
  ui = dashboardPage(
    header = dashboardHeader(
      navbarMenu(
        navbarTab(tabName = "Tab1", "Tab 1"),
        navbarTab(tabName = "Tab2", "Tab 2")
      )
    ),
    body = dashboardBody(
      tabItems(
        tabItem(
          tabName = "Tab1",
          "Tab 1"
        ),
        tabItem(
          tabName = "Tab2",
          "Tab 2"
        )
      )
    ),
    sidebar = dashboardSidebar()
  ),
  server = function(input, output, session) {

  }
)

[kmaheshkulkarni]

Hey @DivadNojnarg this works superbly Thanks for your support. I think you can add these methods to the package. I am designing one template on the basis of these navbar tabs. Will share with you soon

[fmmattioni]

Is there a navbar_light_active_color version for this approach?

[DivadNojnarg]

@fmmattioni : what do you mean?

[fmmattioni]

I was wondering if I could change the color of the navbar link. I was thinking something like this: https://dreamrs.github.io/fresh/articles/vars-bs4dash.html#navbar

[DivadNojnarg]

Sure with:

create_theme(
   bs4dash_vars("navbar-light-active-color" = "purple")
)

I also had to change the navbarMenu container class to navbar-nav so that it matches with the scss definition:

.navbar-nav {
    .nav-link {
      color: $navbar-light-color;

      @include hover-focus() {
        color: $navbar-light-hover-color;
      }

      &.disabled {
        color: $navbar-light-disabled-color;
      }
    }

    .show > .nav-link,
    .active > .nav-link,
    .nav-link.show,
    .nav-link.active {
      color: $navbar-light-active-color;
    }
  }

library(shiny)
library(bs4Dash)
library(fresh)

navbarTab <- function(tabName, ..., icon = NULL) {
  tags$li(
    class = "nav-item",
    tags$a(
      class = "nav-link",
      id = paste0("tab-", tabName),
      href = paste0("#shiny-tab-", tabName),
      `data-toggle` = "tab",
      `data-value` = tabName,
      icon,
      tags$p(...)
    )
  )
}

navbarMenu <- function(..., id = NULL) {
  if (is.null(id)) id <- paste0("tabs_", round(stats::runif(1, min = 0, max = 1e9)))

  tags$ul(
    class = "navbar-nav dropdown", 
    role = "menu",
    id = "sidebar-menu",
    ...,
    div(
      id = id,
      class = "sidebarMenuSelectedTabItem",
      `data-value` = "null",

    )
  )
}

shinyApp(
  ui = dashboardPage(
    freshTheme = create_theme(
      bs4dash_vars("navbar-light-active-color" = "purple")
    ),
    header = dashboardHeader(
      navbarMenu(
        navbarTab(tabName = "Tab1", "Tab 1"),
        navbarTab(tabName = "Tab2", "Tab 2")
      )
    ),
    body = dashboardBody(
      tabItems(
        tabItem(
          tabName = "Tab1",
          "Tab 1"
        ),
        tabItem(
          tabName = "Tab2",
          "Tab 2"
        )
      )
    ),
    sidebar = dashboardSidebar()
  ),
  server = function(input, output, session) {

  }
)

[fmmattioni]

This is great!!! Thanks a lot, @DivadNojnarg!

[DivadNojnarg]

Leave it open until it is implemented in core

[fmmattioni]

Hey @DivadNojnarg,

I have noticed that since a few commits, the above kind of breaks. For example, it doesn't show the home page anymore (need to click on the first tab to show), and once I click on another tab I can't go back anymore.

I have been using the following commit that still worked:

remotes::install_github("RinteRface/bs4Dash@d8cb044f267abb8162068c29e2d959ba520cd040")

But I was wondering what the issue is? I am sorry that I can't give more info 🤔

[DivadNojnarg]

@fmmattioni . As per latest {bs4Dash}: sidebar-menu became a class instead of an id, causing the break.

library(shiny)
library(bs4Dash)
library(fresh)

navbarTab <- function(tabName, ..., icon = NULL) {
    tags$li(
        class = "nav-item",
        tags$a(
            class = "nav-link",
            id = paste0("tab-", tabName),
            href = paste0("#shiny-tab-", tabName),
            `data-toggle` = "tab",
            `data-value` = tabName,
            icon,
            tags$p(...)
        )
    )
}

navbarMenu <- function(..., id = NULL) {
    if (is.null(id)) id <- paste0("tabs_", round(stats::runif(1, min = 0, max = 1e9)))

    tags$ul(
        class = "navbar-nav dropdown sidebar-menu", 
        role = "menu",
        ...,
        div(
            id = id,
            class = "sidebarMenuSelectedTabItem",
            `data-value` = "null",

        )
    )
}

shinyApp(
    ui = dashboardPage(
        freshTheme = create_theme(
            bs4dash_vars("navbar-light-active-color" = "purple")
        ),
        header = dashboardHeader(
            navbarMenu(
                navbarTab(tabName = "Tab1", "Tab 1"),
                navbarTab(tabName = "Tab2", "Tab 2")
            )
        ),
        body = dashboardBody(
            tabItems(
                tabItem(
                    tabName = "Tab1",
                    "Tab 1"
                ),
                tabItem(
                    tabName = "Tab2",
                    "Tab 2"
                )
            )
        ),
        sidebar = dashboardSidebar()
    ),
    server = function(input, output, session) {

    }
)

[fmmattioni]

Fantastic! Thanks a lot for looking into it, @DivadNojnarg !

[shahreyar-abeer]

This is just great! Thanks!

[mikael04]

Thanks DivadNojnarg, i was searching this kind of thing in a modern way to do with shiny for a couple of days.

[jfunction]

Thanks for this. Just a note to self (and others if interested) that some time in the future I want to build on this and make custom navigation tabs like this: https://css-tricks.com/tabs-with-round-out-borders/

[duanyu5871]

@DivadNojnarg Have you got any solution about tabpanel of dropdown, just like this in adminlte website. https://adminlte.io/docs/3.2/components/main-header.html

[DivadNojnarg]

Going to work on this again soon to get it in the function list.