Top Navigation Prototype

use_dash_topnav() is a prototype layout helper for {bs4Dash} apps that should feel more like a top-navigation app than a sidebar app.

The app still defines a regular bs4DashSidebar() with a bs4SidebarMenu(). bs4Dashkit hides that sidebar, mirrors the menu into the navbar, and delegates clicks back to the original sidebar links. That keeps native {bs4Dash} tab switching, input$sidebar, updateTabItems(), and bookmarking behavior intact.

Recommended setup

Use the core helper when you are already using dash_titles():

ttl <- dash_titles(
  brand_text = "Topnav Lab",
  icon = icon("compass"),
  collapsed = "icon-only",
  expanded = "icon-text"
)

body <- bs4DashBody(
  use_bs4Dashkit_core(
    ttl,
    preset = "professional",
    layout = "topnav",
    topnav = dash_topnav_options(
      align = "left",
      gap = 6,
      mobile = "collapse",
      style = "compact",
      title = "auto"
    )
  ),
  bs4TabItems(
    bs4TabItem(tabName = "overview", "Overview"),
    bs4TabItem(tabName = "reports", "Reports")
  )
)

dash_topnav_options() bundles the top-nav settings in one object. You can still use the individual topnav_* arguments in use_bs4Dashkit_core() for small one-off overrides, but the object form keeps production setup easier to scan.

align controls where the mirrored tabs sit in the navbar:

"left" keeps tabs close to the brand and is usually the safest choice when the navbar also has a centered dash_nav_title().
"center" centers the tab group and works best when there is no centered title or when there are only a few short tabs.
"right" moves the tab group toward the right controls, useful when the brand is visually heavy or the left side needs more space.

gap controls the space between top-nav items. Use a small value such as 4 or 6 for subtle breathing room, or 0 for a compact AdminLTE-style tab strip.

Mobile, style, and overflow

By default, mobile top-nav mode uses a hamburger button for tabs:

use_bs4Dashkit_core(
  ttl,
  layout = "topnav",
  topnav = dash_topnav_options(mobile = "collapse")
)

Use mobile = "scroll" if you prefer a single horizontally scrollable row on small screens. Mobile top-nav modes work best without a centered navbar title once the viewport starts to tighten; keep title = "auto" so bs4Dashkit hides dash_nav_title() early when the tab row needs room, or set title = "hide" for a permanently tab-first navbar.

topnav_style controls the tab treatment:

use_bs4Dashkit_core(
  ttl,
  layout = "topnav",
  topnav = dash_topnav_options(style = "underline")
)
use_bs4Dashkit_core(
  ttl,
  layout = "topnav",
  topnav = dash_topnav_options(style = "pill")
)
use_bs4Dashkit_core(
  ttl,
  layout = "topnav",
  topnav = dash_topnav_options(style = "compact")
)

The underline style uses a small animated indicator that moves when the active tab changes.

For crowded desktop navbars, move later tabs into a More dropdown:

use_bs4Dashkit_core(
  ttl,
  layout = "topnav",
  topnav = dash_topnav_options(
    overflow = "more",
    more_after = 4
  )
)

title = "auto" compacts a centered dash_nav_title() when tabs need room, then hides it if there still is not enough space. Use "show", "compact", or "hide" when you want explicit behavior.

Top-nav clicks also emit a Shiny event:

observeEvent(input$bs4dashkit_topnav, {
  str(input$bs4dashkit_topnav)
})

If the page body needs a simple title synced from the active tab, enable:

use_bs4Dashkit_core(
  ttl,
  layout = "topnav",
  topnav = dash_topnav_options(page_title = "tab")
)

You can also call use_dash_topnav() directly if you assemble the other dependencies yourself:

bs4DashBody(
  use_bs4Dashkit(),
  ttl$deps,
  use_dash_theme_preset("professional"),
  use_dash_topnav(topbar_h = "56px", align = "left", gap = 6, mobile = "collapse")
)

Top Navigation Prototype

Recommended setup

Mobile, style, and overflow

Dropdown menu items

Runnable example