Skip to contents

The navigation works differently than in vanilla Shiny. Instead of being provided with purpose-build elements such as navbarPage or tabsetPanel, the user is free to handle “tab” in the way they want.

But may want to look at bar and/or side_navigation for this.

Bar

ui <- page(
  bar(
    slot = "header",
    design = "Header",
    label(
      "Navigation"
    ),
    button(
      "homeBtn",
      icon = "home",
      design = "Transparent",
      slot = "startContent",
      "Home"
    ) |> as_nav_trigger("home"),
    button(
      "dashBtn",
      icon = "add",
      design = "Transparent",
      slot = "startContent",
      "Dashboard"
    ) |> as_nav_trigger("dash"),
    button(
      "aboutBtn",
      icon = "action-settings",
      slot = "endContent",
      "About"
    ) |> as_nav_trigger("about")
  ),
  nav(
    "home",
    title("Home", level = "H1"),
    visible = TRUE
  ),
  nav(
    "dash",
    title("Dashboard", level = "H1")
  ),
  nav(
    "about",
    title("About", level = "H1")
  )
)

server <- \(...){}

shiny::shinyApp(ui, server)
You should set the one nav that is visible on load manually with visible = TRUE

Side Navigation

ui <- page(
  side_content(
    `side-content-visibility` = "AlwaysShow",
    `side-content-position` = "Start",
    htmltools::div(
      slot = "sideContent",
      side_navigation(
        "side",
        side_navigation_item(
          text = "Home",
          icon = "home"
        ) |> as_nav_trigger("home"),
        side_navigation_item(
          text = "Dashboard",
          selected = TRUE
        ) |> as_nav_trigger("dash"),
        side_navigation_item(
          text = "About"
        ) |> as_nav_trigger("about")
      )
    ),
    htmltools::div(
      nav(
        "home",
        title("Home", level = "H1")
      ),
      nav(
        "dash",
        title("Dashboard", level = "H1"),
        visible = TRUE
      ),
      nav(
        "about",
        title("About", level = "H1")
      )
    )
  )
)

server <- \(...){}

shiny::shinyApp(ui, server)