Skip to contents

Element Plus Breadcrumb

Source: R/el_breadcrumb.R
el_breadcrumb.Rd

A trail of links showing where a page sits.

Usage

el_breadcrumb(
  id = NULL,
  items = list(),
  separator = NULL,
  separator_icon = NULL,
  width = NULL,
  slots = NULL,
  session = NULL
)

update_el_breadcrumb(
  session = shiny::getDefaultReactiveDomain(),
  id,
  items = NULL,
  separator = NULL,
  separator_icon = NULL
)

Arguments

id

Breadcrumb ID. Auto-generated if NULL.

items

The trail, a list of el_breadcrumb_item()s – or of list(label =, to =). to is optional and makes that step a link; the last step is usually plain text.

separator

Separator character. Default "/".

separator_icon

Icon component of icon separator. Element Plus's separator-icon (string / Component). An icon's name, such as "Search".

width

Component width, as a CSS unit.

slots

Named list of Element slot contents, such as list(title = shiny::tags$b("Bold")). A shiny.element component given here is absorbed rather than nested. For a scoped slot, write the template with template().

session

In el_breadcrumb(), deprecated: inside a module, wrap id in ns(), as for any Shiny input; a session given here namespaces id once more, with a warning. In update_el_breadcrumb(), the Shiny session, the current one by default, as for shiny::updateTextInput().

Value

A Shiny UI element.

Shiny inputs

  • input$<id> – the label of the step last clicked. Steps without a to are still reported, so a breadcrumb can drive navigation inside a Shiny app without any routing.

Updating from the server

Server-side update for el_breadcrumb().

Every other argument of el_breadcrumb() that can change once it is drawn is an argument here too, under the same name. One left NULL stays as it is; NA returns it to Element's default.

update_el_breadcrumb() is called for its side effect and returns NULL invisibly.

Examples

el_breadcrumb(
  "trail",
  items = list(
    list(label = "Home"),
    list(label = "Reports"),
    list(label = "March")
  )
)
#> <div id="trail" data-shiny-vue style="display: contents">
#>   <script type="text/x-template" data-shiny-vue-template><div id="trail_container" style="display: contents">
#>   <el-breadcrumb :separator="separator === null ? undefined : separator" :separator-icon="separatorIcon === null ? undefined : separatorIcon">
#>     <el-breadcrumb-item v-for="(item, index) in items" :key="index" :to="item.to" :replace="item.replace" @click="handleClick(item)">{{item.label}}</el-breadcrumb-item>
#>   </el-breadcrumb>
#> </div></script>
#>   <script type="application/json" data-shiny-vue-options>{"options":{"data":{"items":[{"label":"Home"},{"label":"Reports"},{"label":"March"}],"separator":null,"separatorIcon":null},"methods":{"handleClick":"function(item) { window.Shiny && Shiny.setInputValue && Shiny.setInputValue('trail', item.label, {priority: 'event'}); }"}},"input":null,"rate":null,"type":null,"use":["shinyElement.plugin"],"evals":["options.methods.handleClick"]}</script>
#> </div>

# An arrow instead of a slash
el_breadcrumb(
  "trail",
  items = list(list(label = "Home"), list(label = "Detail")),
  separator_icon = "ArrowRight"
)
#> <div id="trail" data-shiny-vue style="display: contents">
#>   <script type="text/x-template" data-shiny-vue-template><div id="trail_container" style="display: contents">
#>   <el-breadcrumb :separator="separator === null ? undefined : separator" :separator-icon="separatorIcon === null ? undefined : separatorIcon">
#>     <el-breadcrumb-item v-for="(item, index) in items" :key="index" :to="item.to" :replace="item.replace" @click="handleClick(item)">{{item.label}}</el-breadcrumb-item>
#>   </el-breadcrumb>
#> </div></script>
#>   <script type="application/json" data-shiny-vue-options>{"options":{"data":{"items":[{"label":"Home"},{"label":"Detail"}],"separator":null,"separatorIcon":"ArrowRight"},"methods":{"handleClick":"function(item) { window.Shiny && Shiny.setInputValue && Shiny.setInputValue('trail', item.label, {priority: 'event'}); }"}},"input":null,"rate":null,"type":null,"use":["shinyElement.plugin"],"evals":["options.methods.handleClick"]}</script>
#> </div>
if (interactive()) {
  # inside a server function
  observeEvent(input$open_detail, {
    update_el_breadcrumb(
      session,
      "trail",
      items = list(
        list(label = "Home"),
        list(label = "Detail")
      )
    )
  })
}