navbar: navbar

Description

A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse menu and more.

Usage

navbar(...)
navbar_brand(...)
navbar_content(...)
navbar_item(...)
navbar_toggle(...)

Value

An object of class shiny.tag containing the necessary configuration and including options such as JavaScript dependencies to instantiate a HeroUI navbar component.

Arguments

...: Props to pass to the component. The allowed props are listed below in the Details section.

Details

children*. Type: ReactNode[]. Default: NA.
height. Type: string OR number. Default: "4rem (64px)".
position. Type: static OR sticky. Default: "sticky".
maxWidth. Type: sm OR md OR lg OR xl OR 2xl OR full. Default: "lg".
parentRef. Type: React.RefObject<HTMLElement>. Default: "window".
isBordered. Type: boolean. Default: false.
isBlurred. Type: boolean. Default: true.
isMenuOpen. Type: boolean. Default: false.
isMenuDefaultOpen. Type: boolean. Default: false.
shouldHideOnScroll. Type: boolean. Default: false.
motionProps. Type: MotionProps. Default: NA.
disableScrollHandler. Type: boolean. Default: false.
disableAnimation. Type: boolean. Default: false.
classNames. Type: Partial<Record<'base' OR 'wrapper' OR 'brand' OR 'content' OR 'item' OR 'toggle' OR 'toggleIcon' OR 'menu' OR 'menuItem', string>>. Default: NA.

onMenuOpenChange. Type: (isOpen: boolean) => void. Default: NA.
onScrollPositionChange. Type: (position: number) => void. Default: NA.

children*. Type: ReactNode[]. Default: NA.
justify. Type: start OR center OR end. Default: "start".

children. Type: ReactNode. Default: NA.
isActive. Type: boolean. Default: false.

icon. Type: ReactNode OR ((isOpen: boolean OR undefined) => ReactNode). Default: NA.
isSelected. Type: boolean. Default: false.
defaultSelected. Type: boolean. Default: false.
srOnlyText. Type: string. Default: "open/close navigation menu".

onChange. Type: (isOpen: boolean) => void. Default: NA.

children*. Type: ReactNode[]. Default: NA.
portalContainer. Type: HTMLElement. Default: "document.body".
motionProps. Type: MotionProps. Default: NA.

children. Type: ReactNode. Default: NA.
isActive. Type: boolean. Default: false.

Examples

Run this code

library(shiny)
library(shinyNextUI)
library(shiny.react)
library(shiny.router)

sections <- c("main", "other")

layout <- function(..., content) {
  tags$div(
    css = JS("
      {
        maxW: '100%',
        boxSizing: 'border-box',
      }"
    ),
    ..., # Navbar
    # Content
    tags$div(
      css = JS(
        "{
          boxSizing: 'border-box',
          px: '$12',
          mt: '$8',
          '@xsMax': {px: '$10'}
        }"
      ),
      content
    )
  )
}

# TO DO: create wrapper for end-user to simplify all this mess.
create_navbar <- function(id) {

  input <- get("input", envir = parent.frame())

  nav_links <- lapply(seq_along(sections), function(i) {
    # Li elements
    link(
      inputId = sprintf("link_%s", i),
      href = route_link(sections[[i]]),
      key = i,
      value = i,
      parent = sprintf("navbar_%s", sections[[i]]),
      isActive = if (is.null(input[[sprintf("navbar_%s", id)]])) {
        if (i == 1) TRUE else FALSE
      } else {
        if (input[[sprintf("navbar_%s", id)]] == i) TRUE else FALSE
      },
      sprintf("Link to %s", sections[[i]])
    )
  })

  nav <- navbar(
    id = sprintf("navbar_%s", id),
    maxWidth = "lg",
    variant = "floating",
    isBordered = TRUE,
    navbar_brand(p(b = TRUE, "Brand", color = "inherit", hideIn = "xs")),
    # Ul element
    navbar_content(
      variant = "highlight",
      activeColor = "success",
      nav_links,
      navbar_item(
        action_button(
          inputId = sprintf("navbar_button-%s", id),
          "Click me",
          auto = TRUE,
          flat = TRUE
        )
      )
    )
  )

  if (is.null(input[[sprintf("navbar_%s", id)]])) {
    tagList(
      tags$script(
        sprintf("Shiny.setInputValue('navbar_%s', 0)", id)
      ),
      nav
    )
  } else {
    nav
  }
}

page <- function(id, content) {
  layout(
    reactOutput(sprintf("nav_%s", id)),
    content = content
  )
}

home <- page(
  id = "main",
  card(
    numeric_input(
      inputId = "obs",
      label = "Number of observations:",
      value = 500
    ),
    plotOutput("distPlot")
  )
)
other <- page(
  id = "other",
  tableOutput('table')
)

ui <- nextui_page(
  router_ui(
    route("main", home),
    route("other", other)
  )
)

server <- function(input, output, session) {
  observe(print(input$navbar))
  output$nav_main <- renderReact({
    create_navbar("main")
  })

  output$nav_other <- renderReact({
    create_navbar("other")
  })

  output$distPlot <- renderPlot({
    hist(rnorm(input$obs))
  })
  output$table <- renderTable(iris)

  router_server("main")
}

if (interactive() || is_testing()) shinyApp(ui, server)