Is there a way to build a multi-level dropdown?

[williamorim]

I would like to build a navbar with a multi-level dropdown menu.

Is there a way to do this with bslib? Or I would need to build from scratch using bootstrap as shown in the link below?

https://bootstrap-menu.com/detail-multilevel.html

[gadenbuie]

There sure is! The way to do it is to use nav_menu(): https://rstudio.github.io/bslib/reference/nav-items.html. You can find some examples in ?bslib::navset.

[williamorim]

Hi @gadenbuie
Thank you for your answer!

I would like to build a 2-level menu dropdown. I couldn't do it using only the bslib functions, but with some CSS I could make it work:

I'm still testing it. I'm worried that my CSS might break some other shiny/bslib componment.

[gadenbuie]

You should be able to nest nav_menu() calls. If you can't, please share a small reproducible example and I'll take a look.

[williamorim]

Here's an example:

library(shiny)
library(bslib)

ui <- page_navbar(
  title = "Test",
  nav_panel(
    title = "Home",
    h1("Home")
  ),
  nav_menu(
    title = "Menu 2",
    nav_menu(
      title = "Submenu 1",
      nav_panel(
        title = "Item 1",
        h1("Item 1")
      ),
      nav_panel(
        title = "Item 2",
        h1("Item 2")
      )
    ),
    nav_panel(
      title = "Item 2",
      h1("Item 2")
    ),
    nav_panel(
      title = "Item 3",
      h1("Item 3")
    )
  )
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Without my CSS code, the result is in the figure below. When I click the "Submenu 1" item, the dropdown menu closes.

Session info:

R version 4.5.0 (2025-04-11)
Platform: aarch64-apple-darwin20
Running under: macOS Sequoia 15.5

Matrix products: default
BLAS:   /Library/Frameworks/R.framework/Versions/4.5-arm64/Resources/lib/libRblas.0.dylib 
LAPACK: /Library/Frameworks/R.framework/Versions/4.5-arm64/Resources/lib/libRlapack.dylib;  LAPACK version 3.12.1

locale:
[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

time zone: America/Sao_Paulo
tzcode source: internal

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] bslib_0.9.0  shiny_1.10.0

loaded via a namespace (and not attached):
 [1] digest_0.6.37     later_1.4.2       R6_2.6.1          httpuv_1.6.16    
 [5] fastmap_1.2.0     magrittr_2.0.3    cachem_1.1.0      htmltools_0.5.8.1
 [9] lifecycle_1.0.4   promises_1.3.2    cli_3.6.5         xtable_1.8-4     
[13] sass_0.4.10       jquerylib_0.1.4   compiler_4.5.0    tools_4.5.0      
[17] mime_0.13         Rcpp_1.0.14       rlang_1.1.6       jsonlite_2.0.0   

[williamorim]

Also, this is the CSS code I used to make it work. It can be applied to the minimal example above.

@media all and (min-width: 992px) {

	.navbar .nav-underline .dropdown-menu>li.dropdown>.nav-link {
		padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x) !important;
		margin-bottom: unset !important;
		pointer-events: none;
		border-bottom: unset !important;
		font-size: 1rem !important;
	}

	.dropdown-menu>li.dropdown>a:hover,
	.dropdown-menu>li.dropdown>a:focus {
		border-bottom: unset !important;
	}

	.dropdown-menu>li.dropdown>ul.dropdown-menu {
		display: none;
		position: absolute !important;
		left: 100%;
		top: -7px;
	}

	.nav-item .submenu-left {
		right: 100%;
		left: auto;
	}

	.dropdown-menu>li:hover>.dropdown-menu {
		display: block !important;
	}
}

@media (max-width: 991px) {
	.dropdown-menu .dropdown-menu {
		margin-left: 0.7rem;
		margin-right: 0.7rem;
		margin-bottom: .5rem;
	}
}