@illa-design/breadcrumb v1.3.0

Breadcrumb

Breadcrumb is used to dislay the location of the current page and return previous page.

Installation

yarn add @illa-design/breadcrumb

Import component

import { Breadcrumb, BreadcrumbItem } from "@illa-design/breadcrumb"

API

Breadcrumb Basic Properties

BreadcrumbItem Basic Properties

RouteProps Properties

Example

Basic usage

const routes = [
  {
    path: "/",
    breadcrumbName: "Home",
  },
  {
    path: "/Channel",
    breadcrumbName: "Channel",
    children: [
      {
        path: "/users",
        breadcrumbName: "Users",
      },
      {
        path: "/permission",
        breadcrumbName: "Permission",
      },
    ],
  },
  {
    path: "/news",
    breadcrumbName: "News",
  },
]
<Breadcrumb routes={routes} />

Set separator and size

<Breadcrumb routes={routes} separator={<RightIcon />} style={{ fontSize: 12 }}/>

Set maximum show number of item

<Breadcrumb maxCount={2}>
  <BreadcrumbItem>Home</BreadcrumbItem>
  <BreadcrumbItem>Sub Home</BreadcrumbItem>
  <BreadcrumbItem>All Channel</BreadcrumbItem>
  <BreadcrumbItem>Channel</BreadcrumbItem>
  <BreadcrumbItem>News</BreadcrumbItem>
</Breadcrumb>