page_navbar: Multi-page app with a top navigation bar
In bslib: Custom 'Bootstrap' 'Sass' Themes for 'shiny' and 'rmarkdown'

page_navbar

R Documentation

Multi-page app with a top navigation bar

Description

Create a page that contains a top level navigation bar that can be used to toggle a set of nav_panel() elements. Use this page layout to create the effect of a multi-page app, where your app's content is broken up into multiple "pages" that can be navigated to via the top navigation bar.

Usage

page_navbar(
  ...,
  title = NULL,
  id = NULL,
  selected = NULL,
  sidebar = NULL,
  fillable = TRUE,
  fillable_mobile = FALSE,
  gap = NULL,
  padding = NULL,
  position = c("static-top", "fixed-top", "fixed-bottom"),
  header = NULL,
  footer = NULL,
  bg = NULL,
  inverse = "auto",
  underline = TRUE,
  collapsible = TRUE,
  fluid = TRUE,
  theme = bs_theme(),
  window_title = NA,
  lang = NULL
)

Arguments

`...`	a collection of `nav_panel()` items.
`title`	A (left-aligned) title to place in the card header/footer. If provided, other nav items are automatically right aligned.
`id`	a character string used for dynamically updating the container (see `nav_select()`).
`selected`	a character string matching the `value` of a particular `nav_panel()` item to selected by default.
`sidebar`	A `sidebar()` component to display on every `nav_panel()` page.
`fillable`	Whether or not to allow `fill` items to grow/shrink to fit the browser window. If `TRUE`, all `nav_panel()` pages are `fillable`. A character vector, matching the `value` of `nav_panel()`s to be filled, may also be provided. Note that, if a `sidebar` is provided, `fillable` makes the main content portion fillable.
`fillable_mobile`	Whether or not `fillable` pages should fill the viewport's height on mobile devices (i.e., narrow windows).
`gap`	A CSS length unit defining the `gap` (i.e., spacing) between elements provided to `...`.
`padding`	Padding to use for the body. This can be a numeric vector (which will be interpreted as pixels) or a character vector with valid CSS lengths. The length can be between one and four. If one, then that value will be used for all four sides. If two, then the first value will be used for the top and bottom, while the second value will be used for left and right. If three, then the first will be used for top, the second will be left and right, and the third will be bottom. If four, then the values will be interpreted as top, right, bottom, and left respectively.
`position`	Determines whether the navbar should be displayed at the top of the page with normal scrolling behavior (`"static-top"`), pinned at the top (`"fixed-top"`), or pinned at the bottom (`"fixed-bottom"`). Note that using `"fixed-top"` or `"fixed-bottom"` will cause the navbar to overlay your body content, unless you add padding, e.g.: `tags$style(type="text/css", "body {padding-top: 70px;}")`
`header`	UI element(s) (htmltools::tags) to display above the nav content.
`footer`	UI element(s) (htmltools::tags) to display below the nav content.
`bg`	a CSS color to use for the navbar's background color.
`inverse`	Either `TRUE` for a light text color or `FALSE` for a dark text color. If `"auto"` (the default), the best contrast to `bg` is chosen.
`underline`	Whether or not to add underline styling to page links when active or focused.
`collapsible`	`TRUE` to automatically collapse the navigation elements into an expandable menu on mobile devices or narrow window widths.
`fluid`	`TRUE` to use fluid layout; `FALSE` to use fixed layout.
`theme`	A `bs_theme()` object.
`window_title`	the browser window title. The default value, `NA`, means to use any character strings that appear in `title` (if none are found, the host URL of the page is displayed by default).
`lang`	ISO 639-1 language code for the HTML page, such as "en" or "ko". This will be used as the lang in the `<html>` tag, as in `<html lang="en">`. The default (NULL) results in an empty string.

References

Getting Started with Dashboards on the bslib website.

Examples


library(shiny)
library(bslib)

link_shiny <- tags$a(
  shiny::icon("github"), "Shiny",
  href = "https://github.com/rstudio/shiny",
  target = "_blank"
)
link_posit <- tags$a(
  shiny::icon("r-project"), "Posit",
  href = "https://posit.co",
  target = "_blank"
)

ui <- page_navbar(
  title = "My App",
  nav_panel(title = "One", p("First page content.")),
  nav_panel(title = "Two", p("Second page content.")),
  nav_panel("Three", p("Third page content.")),
  nav_spacer(),
  nav_menu(
    title = "Links",
    align = "right",
    nav_item(link_shiny),
    nav_item(link_posit)
  )
)

server <- function(...) { } # not used in this example

shinyApp(ui, server)

bslib documentation built on Sept. 11, 2024, 7:49 p.m.