Breadcrumb

A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.

Examples

Basic

View Code

<Breadcrumb>
  <BreadcrumbItem>Home</BreadcrumbItem>
  <BreadcrumbItem href="/">Application Center</BreadcrumbItem>
  <BreadcrumbItem href="/">Application List</BreadcrumbItem>
  <BreadcrumbItem>An Application</BreadcrumbItem>
</Breadcrumb>

<script>
  import { Breadcrumb, BreadcrumbItem } from "svant";
</script>

With Icons

View Code

<Breadcrumb>
  <BreadcrumbItem href="/">
    <HomeOutlined />
  </BreadcrumbItem>
  <BreadcrumbItem href="/">
    <UserOutlined />
    <span>Application List</span>
  </BreadcrumbItem>
  <BreadcrumbItem>Application</BreadcrumbItem>
</Breadcrumb>

<script>
  import { Breadcrumb, BreadcrumbItem } from "svant";
  import { HomeOutlined, UserOutlined } from "svant/icons";
</script>

Configuring the Separator

The separator can be changed using the separator prop on the Breadcrumb component. Either a string or a Svelte component (for example - an icon component) can be passed.

View Code

<Breadcrumb separator=">">
  <BreadcrumbItem>Home</BreadcrumbItem>
  <BreadcrumbItem href="/">Application Center</BreadcrumbItem>
  <BreadcrumbItem href="/">Application List</BreadcrumbItem>
  <BreadcrumbItem>An Application</BreadcrumbItem>
</Breadcrumb>

<br />

<Breadcrumb separator="{CaretRightOutlined}">
  <BreadcrumbItem>Home</BreadcrumbItem>
  <BreadcrumbItem href="/">Application Center</BreadcrumbItem>
  <BreadcrumbItem href="/">Application List</BreadcrumbItem>
  <BreadcrumbItem>An Application</BreadcrumbItem>
</Breadcrumb>

<script>
  import { Breadcrumb, BreadcrumbItem } from "svant";
  import { CaretRightOutlined } from "svant/icons";
</script>

Using Multiple Separators

The separator can be changed using the separator prop on the Breadcrumb component. Either a string or a Svelte component (for example - an icon component) can be passed.

View Code

<Breadcrumb separator="/">
  <BreadcrumbItem separator="{CaretRightOutlined}">Home</BreadcrumbItem>
  <BreadcrumbItem href="/">Application Center</BreadcrumbItem>
  <BreadcrumbItem href="/" separator="{CaretRightOutlined}">
    Application List
  </BreadcrumbItem>
  <BreadcrumbItem>An Application</BreadcrumbItem>
</Breadcrumb>

<script>
  import { Breadcrumb, BreadcrumbItem } from "svant";
  import { CaretRightOutlined } from "svant/icons";
</script>

API

Breadcrumb Attributes

Property	Description	Type	Default
separator	Sets the separator used for the component	String or Svelte component	/

BreadcrumbItem Attributes

Property	Description	Type	Default
href	If set, the item will be wrapper in a link	String
separator	Sets the individual separator for the item	String or Svelte component	/