Breadcrumb

Basic

Sizes

• Breadcrumb supports 3 sizes sm, md and lg and can be changed by passing the size prop.
• Default size is lg.

• With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
xs → xl	0px → 1279px	sm
xl → 3xl	1280px → 1919px	md
3xl → ∞	1920px → ∞	lg

Limit render items

• Breadcrumb supports limiting the number of items to render by passing the limit prop.
• Minimum limit is 2.

With Icon

• Breadcrumb supports showing an ButtonIcon for the last item by setting the icon prop.
• with icon props, you can pass the onClick event handler to the icon component to handle the click event.

Plain Text Items

• Provide the label property without an href to display a breadcrumb item as static text instead of a link.

TypeScript

• BreadcrumbItemValueProps type exported from @ocean-network-express/magenta-ui/react.