Breadcrumb: Breadcrumb

In Appsilon/shiny.fluent: Microsoft Fluent UI for Shiny Apps

Breadcrumb

Description

Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy.

Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.

For more details and examples visit the official docs. The R package cannot handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.

Usage

Breadcrumb(...)

Arguments

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

Details

• ariaLabel string
  Aria label for the root element of the breadcrumb (which is a navigation landmark).

• className string
  Optional class for the root breadcrumb element.

• componentRef ⁠IRefObject<IBreadcrumb>⁠
  Optional callback to access the IBreadcrumb interface. Use this instead of ref for accessing the public methods and properties of the component.

• dividerAs ⁠IComponentAs<IDividerAsProps>⁠
  Render a custom divider in place of the default chevron >

• focusZoneProps IFocusZoneProps
  Extra props for the root FocusZone.

• items IBreadcrumbItem[]
  Collection of breadcrumbs to render

• maxDisplayedItems number
  The maximum number of breadcrumbs to display before coalescing. If not specified, all breadcrumbs will be rendered.

• onGrowData ⁠(data: IBreadcrumbData) => IBreadcrumbData | undefined⁠
  Method that determines how to group the length of the breadcrumb. Return undefined to never increase breadcrumb length.

• onReduceData ⁠(data: IBreadcrumbData) => IBreadcrumbData | undefined⁠
  Method that determines how to reduce the length of the breadcrumb. Return undefined to never reduce breadcrumb length.

• onRenderItem ⁠IRenderFunction<IBreadcrumbItem>⁠
  Custom render function for each breadcrumb item.

• onRenderOverflowIcon ⁠IRenderFunction<IButtonProps>⁠
  Render a custom overflow icon in place of the default icon ...

• overflowAriaLabel string
  Aria label for the overflow button.

• overflowIndex number
  Optional index where overflow items will be collapsed. Defaults to 0.

• styles ⁠IStyleFunctionOrObject<IBreadcrumbStyleProps, IBreadcrumbStyles>⁠
  

• theme ITheme
  

• tooltipHostProps ITooltipHostProps
  Extra props for the TooltipHost which wraps each breadcrumb item.

• item IBreadcrumbItem
  Breadcrumb item to left of the divider to be passed for custom rendering. For overflowed items, it will be last item in the list.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Examples

library(shiny)
library(shiny.fluent)

items <- list(
  list(text = "Files", key = "Files", href = "#/page"),
  list(text = "Folder 1", key = "f1", href = "#/page"),
  list(text = "Folder 2", key = "f2", href = "#/page"),
  list(text = "Folder 3", key = "f3", href = "#/page"),
  list(text = "Folder 4 (non-clickable)", key = "f4"),
  list(text = "Folder 5", key = "f5", href = "#/page", isCurrentItem = TRUE)
)

ui <- function(id) {
  Breadcrumb(
    items = items,
    maxDisplayedItems = 3,
    ariaLabel = "Breadcrumb with items rendered as links",
    overflowAriaLabel = "More links"
  )
}
server <- function(id) {
  moduleServer(id, function(input, output, session) { })
}

if (interactive()) {
  shinyApp(ui("app"), function(input, output) server("app"))
}

Appsilon/shiny.fluent documentation built on Oct. 4, 2023, 6:59 a.m.