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>
<Tooltip tag={Breadcrumbs.Item} active={false} href='#' title='Projects' role={'link'}>
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!"
role={'link'}
>
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>
<Tooltip tag={Breadcrumbs.Item} active={false} href='#' title='Projects' role={'link'}>
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!"
role={'link'}
>
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>
<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;
import React from 'react';
import Breadcrumbs from 'intergalactic/breadcrumbs';
import Link from 'intergalactic/link';
const Demo = () => (
<Breadcrumbs>
<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;