Props

Breadcrumb

The Breadcrumb component provides a trail of links to help users understand their location within the application's hierarchy and navigate back to previous pages. It enhances user experience by improving navigation and context within complex interfaces.

Source

Github

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.

Github

Icon

You can use icons in your breadcrumb items.

Github

Collapsed items

You can collapse items to save space.

Github

Overflow gradient

A gradient effect will be applied to indicate overflowed items.

Github

Last child clickable

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

Github

Items without link

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

Github

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

Window Dropdown menu