Breadcrumb

Breadcrumbs are usually used to navigate across categories and also to help the user to understand where he is.

Examples

<Breadcrumb
  elements={[
    { name: 'Home', url: '/#' },
    { name: 'Components', url: '/#components' },
    { name: 'Breadcrumb' },
  ]}
/>

<Breadcrumb
  elements={[
    { name: 'Home', url: '/#' },
    { name: 'Components', url: '/#components' },
    { name: 'Breadcrumb' },
  ]}
/>

Breacrumb with larger margin and custom separator :

Home>Components>Breadcrumb

const otherTheme = {
  components: {
    breadcrumb: {
      breadcrumbSeparator: {
        spaces: {
          marginLeft: '16px',
          marginRight: '16px',
        },
      },
    },
  },
}

render(
  <ThemeProvider otherTheme={otherTheme}>
    <Breadcrumb
      elements={[
        { name: 'Home', url: '/#' },
        { name: 'Components', url: '/components' },
        { name: 'Breadcrumb' },
      ]}
      separator={'>'}
    />
  </ThemeProvider>,
)

const otherTheme = {
  components: {
    breadcrumb: {
      breadcrumbSeparator: {
        spaces: {
          marginLeft: '16px',
          marginRight: '16px',
        },
      },
    },
  },
}
render(
  <ThemeProvider otherTheme={otherTheme}>
    <Breadcrumb
      elements={[
        { name: 'Home', url: '/#' },
        { name: 'Components', url: '/components' },
        { name: 'Breadcrumb' },
      ]}
      separator={'>'}
    />
  </ThemeProvider>,
)

The default rendering function expect each element to have at least a name as a string. You can also provide an url to generate a link around this element.

You can provide your own rendering function as element.render. You can also pass a global rendering function as renderElement prop. These functions will be called from most specific to least specific (ie: element, then global, then default). It'll stop at the first function that return a valid JSX component.

Ultra Custom render>Global Breadcrumb Custom renderer>Default Renderer with an url>Default Renderer without an url

const Red = styled(Link)`
  color: red;
`
const Green = styled(Link)`
  color: green;
`
render(
  <Breadcrumb
    elements={[
      {
        name: 'Ultra Custom render',
        someProps: 15,
        render: element => <Red href="#">{element.name}</Red>,
      },
      { name: 'Global Breadcrumb Custom renderer', someProps: 10 },
      { name: 'Default Renderer with an url', url: '#' },
      { name: 'Default Renderer without an url' },
    ]}
    separator={'>'}
    renderElement={element => {
      // Let's render, only when some prop is equals to 10
      // We return nothing (or null) so that it falls back to the default renderer
      if (element.someProps === 10) {
        return <Green href="#">{element.name}</Green>
      }
    }}
  />,
)

const Red = styled(Link)`
  color: red;
`
const Green = styled(Link)`
  color: green;
`
render(
  <Breadcrumb
    elements={[
      {
        name: 'Ultra Custom render',
        someProps: 15,
        render: element => <Red href="#">{element.name}</Red>,
      },
      { name: 'Global Breadcrumb Custom renderer', someProps: 10 },
      { name: 'Default Renderer with an url', url: '#' },
      { name: 'Default Renderer without an url' },
    ]}
    separator={'>'}
    renderElement={element => {
      // Let's render, only when some prop is equals to 10
      // We return nothing (or null) so that it falls back to the default renderer
      if (element.someProps === 10) {
        return <Green href="#">{element.name}</Green>
      }
    }}
  />,
)

Theme

Props

Name	Type	Default value	Description
elements	custom	null	Array elements of this breadcrumb. Should be sorted.
separator	string	' / '	Separator character to put between links.
renderElement	func	null	The function to use for rendering of each element