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 can not handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.

Breadcrumb(...)

Arguments

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.

Examples

library(shiny.fluent)

if (interactive()) {
  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)
  )

  shinyApp(
    ui = Breadcrumb(
      items = items,
      maxDisplayedItems = 3,
      ariaLabel = "Breadcrumb with items rendered as links",
      overflowAriaLabel = "More links"
    ),
    server = function(input, output) {}
  )
}