bs4Dash
bs4Dash copied to clipboard
RinteRface
How to Show Tabpanels in bs4navbar() ?
Do you mean navbar navigation with tabs like for the sidebar?
Yes Definitely
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
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) {
}
)
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
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
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) {
}
)
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 🤔
@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) {
}
)
Thanks DivadNojnarg, i was searching this kind of thing in a modern way to do with shiny for a couple of days.
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/
@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
