Welcome UI - Breadcrumb

import { Breadcrumb } from 'welcome-ui/Breadcrumb'

const Example = () => {
  return (
    <Breadcrumb>
      <Breadcrumb.Item href="/">Introduction</Breadcrumb.Item>
      <Breadcrumb.Item href="/">Components</Breadcrumb.Item>
      <Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>
    </Breadcrumb>
  )
}

export default Example

Examples

Separator

You can customize your separator.

Last child clickable

By default we removed clickable the last child. You can change this by set to false lastChildNotClickable

Items without link

Items without link will be disable. We are looking for href prop. (or to prop for react-router)

Usage with React Router

import { Link as RouterLink } from 'react-router-dom'

return (
  <Breadcrumb>
    <Breadcrumb.Item as={RouterLink} to="/">
      Introduction
    </Breadcrumb.Item>
    <Breadcrumb.Item as={RouterLink} to="/components">
      Components
    </Breadcrumb.Item>
    <Breadcrumb.Item as={RouterLink} to="/components/breadcrumb">
      Breadcrumb
    </Breadcrumb.Item>
  </Breadcrumb>
)