Skip to contents

Breadcrumb

Source: vignettes/articles/components/breadcrumb.Rmd
breadcrumb.Rmd

Displays the location of the current page, making it easier to browser back.

Basic usage

In el-breadcrumb, each el-breadcrumb-item is a tag that stands for every level starting from homepage. This component has a String attribute separator, and it determines the separator. Its default value is ‘/’.

el_breadcrumb(
  "crumbs",
  separator = "/",
  items = list(
    el_breadcrumb_item("homepage", to = "/"),
    el_breadcrumb_item("promotion management"),
    el_breadcrumb_item("promotion list"),
    el_breadcrumb_item("promotion detail")
  )
)

Icon separator

Set separator-icon to use svg icon as the separator，it will cover separator

el_breadcrumb(
  "crumbs_icon",
  separator_icon = "ArrowRight",
  items = list(
    el_breadcrumb_item("homepage", to = "/"),
    el_breadcrumb_item("promotion management"),
    el_breadcrumb_item("promotion list"),
    el_breadcrumb_item("promotion detail")
  )
)

API

Element Plus’s tables, and beside each entry where it is in R.

Element In R Description Type Accepted Default
separator separator separator character 1 /
separator-icon separator_icon icon component of icon separator 2 / 3 —
Element In R Description
default default content customize default content
Element In R Description Type Accepted Default
to el_breadcrumb_item(to =) target route of the link, same as to of vue-router 4 / 5RouteLocationRaw ’’
replace el_breadcrumb_item(replace =) if true, the navigation will not leave a history record 6 false
Element In R Description
default default content customize default content