Breadcrumbs item truncation

Try resizing the page to see how the links adjust. If the text in a link is too long, it will be truncated with an ellipsis. You can also place the <Breadcrumbs.Item /> within other components.

import React from 'react';
import Breadcrumbs from '@semcore/breadcrumbs';
import Ellipsis from '@semcore/ellipsis';

const Demo = () => (
  <Breadcrumbs aria-label='Truncation example'>
    <Ellipsis>
      <Ellipsis.Content tag={Breadcrumbs.Item} active={false} href='#' role={'link'}>
        Ellipsis
      </Ellipsis.Content>
      <Ellipsis.Popper />
    </Ellipsis>
    <Ellipsis>
      <Ellipsis.Content tag={Breadcrumbs.Item} active={false} href='#' role={'link'}>
        This title is longer than a giraffe's neck, I bet it's been doing neck workouts!
      </Ellipsis.Content>
      <Ellipsis.Popper />
    </Ellipsis>
    <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 React from 'react';
import Breadcrumbs from '@semcore/breadcrumbs';
import Link from '@semcore/link';

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;