Truncating long items

Ellipsis is enabled in Breadcrumbs by default (you should explicitly limit the item width to see the effect).

import Breadcrumbs from '@semcore/ui/breadcrumbs';
import React from 'react';

const Demo = () => (
  <Breadcrumbs aria-label='Truncation example'>
    <Breadcrumbs.Item
      active={false}
      href='#'
      role='link'
      ellipsis={true}
    >
      Ellipsis
    </Breadcrumbs.Item>
    <Breadcrumbs.Item
      active={false}
      href='#'
      role='link'
      wMax={200}
      ellipsis={true}
    >
      This title is longer than a giraffe's neck, I bet it's been doing neck workouts!
    </Breadcrumbs.Item>
    <Breadcrumbs.Item active>Current page</Breadcrumbs.Item>
  </Breadcrumbs>
);

export default Demo;

Redefining tag

You can redefine tag for the <Breadcrumbs.Item />. This is necessary, for example, to use Link from react-router.

import Breadcrumbs from '@semcore/ui/breadcrumbs';
import Link from '@semcore/ui/link';
import React from 'react';

const Demo = () => (
  <Breadcrumbs aria-label='Redefining tag example'>
    <Breadcrumbs.Item href='/'>Projects</Breadcrumbs.Item>
    <Breadcrumbs.Item href='/components/breadcrumbs'>somedomain.com</Breadcrumbs.Item>
    <Breadcrumbs.Item tag={Link} active href='#'>
      Current page
    </Breadcrumbs.Item>
  </Breadcrumbs>
);

export default Demo;