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.

Icon

You can use icons in your breadcrumb items.

Collapsed items

You can collapse items to save space.

Overflow gradient

A gradient effect will be applied to indicate overflowed items.

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>
)