Skip to contents

Service navigation

Source: R/service_navigation.R
service_navigation.Rd

Service navigation component consistent with the GDS service navigation. # nolint

Note: This component uses a hardcoded element ID for the navigation list and mobile menu toggle. Using multiple service_navigation() instances on the same page will cause ID conflicts and the mobile menu toggle may not work correctly.

The first link is marked as the current page when the app loads, matching the first tab panel Shiny shows by default. If your app starts on a different page, call update_service_navigation() when the session starts.

Put service_navigation() in your app's top-level UI and wire it up from the top-level server function. It is not designed to be used inside a Shiny module: an inputID wrapped in ns() is cleaned up like any other (so NS("mod", "summary") becomes mod_summary), and no longer matches the module's namespaced input.

Usage

service_navigation(
  links,
  service_name = NULL,
  auto_page_title = TRUE,
  page_title_suffix = NULL,
  width = "standard"
)

Arguments

A character vector of link text for the service navigation. Each link's inputID is generated by lowercasing the text and replacing every non-alphanumeric character with an underscore, e.g. "Overview page" becomes overview_page. To choose the inputIDs yourself, supply a named vector where names are the link text and values are the inputIDs, e.g. c("Overview page" = "overview"). Supplied inputIDs are cleaned up in the same way, so "Page-Two" becomes page_two. Every link must end up with a unique inputID.

service_name

An optional character string containing the service name to be displayed in the navigation bar

auto_page_title

Logical. When TRUE (the default), the browser tab title is updated to match the active nav link whenever the user navigates — both by clicking a link and via update_service_navigation(). Set to FALSE to opt out and manage the page title yourself. Keeping the title in sync with the visible page is a GOV.UK Design System recommendation for accessibility.

page_title_suffix

Optional character string appended to the page title in the format "<link text> | <suffix>" — typically the service name. Only used when auto_page_title = TRUE. For finer control (e.g. when a page heading differs from its nav link label), call update_page_title() from your server code.

width

Width of the component. One of "standard" (the default, GOV.UK's usual 960px content width), "three-quarters" (three-quarters of the viewport, never narrower than standard), "full" (no max-width, so the container fills the viewport, with grid gutters also removed), or a CSS length (e.g. "1400px", "90vw") for a custom max-width.

Value

Shiny tag object

See also

Other Govstyle navigation: backlink_Input(), navigate_to(), service_navigation_server(), update_page_title(), update_service_navigation()

Examples

ui <- shinyGovstyle::gov_page(
  shinyGovstyle::header("Title", "Secondary heading"),
  shinyGovstyle::service_navigation(
     c("Summary data", "Detailed stats 1", "User guide")
  ),
  bslib::navset_hidden(
     id = "main_panels",
     bslib::nav_panel(
       "summary_data",
       shiny::tags$h2("Summary data")
     ),
     bslib::nav_panel(
       "detailed_stats_1",
       shiny::tags$h2("Detailed stats 1")
     ),
     bslib::nav_panel(
       "user_guide",
       shiny::tags$h2("User guide")
     )
   ),
   shinyGovstyle::footer(full = TRUE)
)

server <- function(input, output, session) {
  observeEvent(
    input$summary_data,
    bslib::nav_select("main_panels", "summary_data")
  )
  observeEvent(
    input$detailed_stats_1,
    bslib::nav_select("main_panels", "detailed_stats_1")
  )
  observeEvent(
    input$user_guide,
    bslib::nav_select("main_panels", "user_guide")
  )
}

if (interactive()) shiny::shinyApp(ui = ui, server = server)