Breadcrumbs
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 '@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
.
tsx
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;
Last updated: