WUI logo

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@welcome-ui/breadcrumb
OverviewProps
import * as React from 'react'
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

Installation

1

Run the following command:

yarn add @welcome-ui/breadcrumb
2

Import component:

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

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