Developer 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.
tsx
import React from 'react';
import Breadcrumbs from 'intergalactic/breadcrumbs';
import Tooltip from 'intergalactic/tooltip';
const Demo = () => (
<Breadcrumbs tag='nav'>
<Tooltip tag={Breadcrumbs.Item} active={false} href='#' title='Projects'>
Projects
</Tooltip>
<Tooltip
tag={Breadcrumbs.Item}
active={false}
href='#'
title="This title is longer than a giraffe's neck, I bet it's been doing neck workouts!"
>
This title is longer than a giraffe's neck, I bet it's been doing neck workouts!
</Tooltip>
<Breadcrumbs.Item active>Current page</Breadcrumbs.Item>
</Breadcrumbs>
);
export default Demo;import React from 'react';
import Breadcrumbs from 'intergalactic/breadcrumbs';
import Tooltip from 'intergalactic/tooltip';
const Demo = () => (
<Breadcrumbs tag='nav'>
<Tooltip tag={Breadcrumbs.Item} active={false} href='#' title='Projects'>
Projects
</Tooltip>
<Tooltip
tag={Breadcrumbs.Item}
active={false}
href='#'
title="This title is longer than a giraffe's neck, I bet it's been doing neck workouts!"
>
This title is longer than a giraffe's neck, I bet it's been doing neck workouts!
</Tooltip>
<Breadcrumbs.Item active>Current page</Breadcrumbs.Item>
</Breadcrumbs>
);
export default Demo;Redefining a tag
You can redefine tag for the <Breadcrumbs.Item />. This is necessary, for example, to use Link from react-router.
tsx
import React from 'react';
import Breadcrumbs from 'intergalactic/breadcrumbs';
import Link from 'intergalactic/link';
const Demo = () => (
<Breadcrumbs tag='nav'>
<Breadcrumbs.Item tag='a' href='/'>
Projects
</Breadcrumbs.Item>
<Breadcrumbs.Item tag='a' href='/components/breadcrumbs'>
somedomain.com
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Link active href='#'>
Current page
</Link>
</Breadcrumbs.Item>
</Breadcrumbs>
);
export default Demo;import React from 'react';
import Breadcrumbs from 'intergalactic/breadcrumbs';
import Link from 'intergalactic/link';
const Demo = () => (
<Breadcrumbs tag='nav'>
<Breadcrumbs.Item tag='a' href='/'>
Projects
</Breadcrumbs.Item>
<Breadcrumbs.Item tag='a' href='/components/breadcrumbs'>
somedomain.com
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Link active href='#'>
Current page
</Link>
</Breadcrumbs.Item>
</Breadcrumbs>
);
export default Demo;