After v0.34.0, the truncation happens if the text is overflowed. Default max-width is set to 150px. You could use showTooltip to customize ellipsis behavior.
import React from 'react';
import { Breadcrumb, Typography } from '@douyinfe/semi-ui';
() => {
const routes = ['Home', 'The is a very very very very long title', 'Detail'];
const { Text } = Typography;
return (
<>
<Text size="small">Default</Text>
<Breadcrumb
routes={routes}
/>
<br/>
<Text size="small">No tooltip</Text>
<Breadcrumb
showTooltip={false}
routes={routes}
/>
<br/>
<Text size="small">No truncation</Text>
<Breadcrumb
showTooltip={{ width: 'auto' }}
routes={routes}
/>
<br/>
<Text size="small">Ellipsis from middle of text</Text>
<Breadcrumb
showTooltip={{ ellipsisPos: 'middle' }}
routes={routes}
/>
<br/>
<Text size="small">Customize tooltip</Text>
<Breadcrumb
showTooltip={{ opts: { position: 'topLeft' } }}
routes={routes}
/>
</>
);
};
When the path exceeds 4 levels, the second level to the penultimate one will be replaced by ellipsis. You can click the ellipsis to reveal all levels.
For v>=1.9.0 , you could use maxItemCount to set the number exceeded to trigger auto collapse.
import React from 'react';
import { Breadcrumb } from '@douyinfe/semi-ui';
() => (
<Breadcrumb>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>Many levels</Breadcrumb.Item>
<Breadcrumb.Item>Another level</Breadcrumb.Item>
<Breadcrumb.Item>Another level again</Breadcrumb.Item>
<Breadcrumb.Item>Here is another one</Breadcrumb.Item>
<Breadcrumb.Item>Penultimate</Breadcrumb.Item>
<Breadcrumb.Item>Detail</Breadcrumb.Item>
</Breadcrumb>
);
Custom Ellipsis
There are two ellipsis area rendering types provided inside the component. You can set and select the desired rendering type through moreType. The optional values of moreType are default and popover.
import React from 'react';
import { Breadcrumb } from '@douyinfe/semi-ui';
() => (
<Breadcrumb moreType='popover'>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>Many levels</Breadcrumb.Item>
<Breadcrumb.Item>Another level</Breadcrumb.Item>
<Breadcrumb.Item>Another level again</Breadcrumb.Item>
<Breadcrumb.Item>Here is another one</Breadcrumb.Item>
<Breadcrumb.Item>Penultimate</Breadcrumb.Item>
<Breadcrumb.Item>Detail</Breadcrumb.Item>
</Breadcrumb>
);
If you want to customize other forms of rendering for the ellipsis area, you can use the renderMore() method.
Breadcrumb supports passing in an array of strings or route objects consisting of { name, path, href, icon }. You can also use renderItem to render React.nodes. Breadcrumbs created in this way will also be truncated.
name: Name displayed, default with an empty string. When route passed in is a string only, it is set to name property.
path: Routing path.
href: Link destination and is mounted on the <a> tag.
icon: Icon displayed.
import React from 'react';
import { Breadcrumb } from '@douyinfe/semi-ui';
import { IconHome, IconArticle } from '@douyinfe/semi-icons';
() => (
<div>
<Breadcrumb
routes={['Semi-ui', 'Breadcrumb', 'Default']}
/>
<br/>
<Breadcrumb
routes={
[
{
path: '/',
Href: '/',
icon: <IconHome />
},
{
path: '/breadcrumb',
href: '/en-US/navigation/breadcrumb',
name: 'breadcrumb',
icon: <IconArticle />
},
'with icon'
]
}
/>
<br/>
<Breadcrumb
routes={['Index', 'This is a very long level', 'Detail']}
/>
</div>
);
API reference
Breadcrumb
Properties
Instructions
type
Default
version
activeIndex
Controlled use, currently selected navigation index
-
2.61.0
autoCollapse
Toggle whether to auto collapse when exceed maxItemCount
Toggle whether to show tooltip if text overflowed. If passed in as an object: width, overflowed width; ellipsisPos, ways of truncation; opts, passed directly to Tooltip component