--- localeCode: en-US order: 35 category: Navigation title: Breadcrumb subTitle: Breadcrumb icon: doc-breadcrumb brief: Breadcrumbs allow users to make selections from a range of values and provide an auxiliary navigation that can return to previous page. --- ## Demos ### How to import ```jsx import { Breadcrumb } from '@douyinfe/semi-ui'; ``` ### Basic Usage ```jsx live=true import React from 'react'; import { Breadcrumb } from '@douyinfe/semi-ui'; () => ( Semi-ui Breadcrumb Default ) ``` ### With Icons ```jsx live=true import React from 'react'; import { Breadcrumb } from '@douyinfe/semi-ui'; import { IconHome, IconArticle } from '@douyinfe/semi-icons'; () => ( }> }>Breadcrumb With Icon ) ``` ### Size You can set the `compact` property to `false` to increase the size of icons and texts. ```jsx live=true import React from 'react'; import { Breadcrumb } from '@douyinfe/semi-ui'; import { IconHome } from '@douyinfe/semi-icons'; () => (

}> Breadcrumb Loose
}> Breadcrumb Loose

) ``` ### Custom Separator Default separator is `/`. ```jsx live=true import React from 'react'; import { Breadcrumb } from '@douyinfe/semi-ui'; import { IconArrowRight } from '@douyinfe/semi-icons'; () => (

'}> Semi-ui Breadcrumb Default
}> Semi-ui Breadcrumb Default v>=1.16.0
Semi-ui Breadcrumb Default

) ``` ### Truncated Logic 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. ```jsx live=true 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 ( <> Default
No tooltip
No truncation
Ellipsis from middle of text
Customize tooltip ) } ``` 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. ```jsx live=true import React from 'react'; import { Breadcrumb } from '@douyinfe/semi-ui'; () => ( Home Many levels Another level Another level again Here is another one Penultimate Detail ) ``` ### 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`. ```jsx live=true import React from 'react'; import { Breadcrumb } from '@douyinfe/semi-ui'; () => ( Home Many levels Another level Another level again Here is another one Penultimate Detail ) ``` If you want to customize other forms of rendering for the ellipsis area, you can use the `renderMore()` method. ```jsx live=true import React from 'react'; import { Breadcrumb, Popover } from '@douyinfe/semi-ui'; import { IconMore } from '@douyinfe/semi-icons'; function Demo() { const separator = '-'; // Separator for splicing restItem array items const renderMore = restItem => { const content = ( <> { restItem.map((item, idx) => ( {item} {idx !== restItem.length - 1 && {separator} } )) } ) return ( ); }; return ( <> renderMore(restItem)} onClick={(item, e) => console.log(item, e)} > Home Many levels Another level Another level again Here is another one Penultimate Detail ); } ``` ### Route Object 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 `` tag. - `icon`: Icon displayed. ```jsx live=true hideInDSM import React from 'react'; import { Breadcrumb } from '@douyinfe/semi-ui'; import { IconHome, IconArticle } from '@douyinfe/semi-icons'; () => (

}, { path: '/breadcrumb', href: '/components/breadcrumb', name: 'breadcrumb', icon: }, 'with icon' ] } />