Breadcrumb

Breadcrumbs show the user's current location inside a hierarchy and provide quick navigation to parent pages. Three visual variants × two separator styles cover every layout context.

Default

Clean inline breadcrumb with no container chrome. The home item renders a house icon; an ellipsis item collapses intermediate routes; the current page is highlighted in the primary brand colour and truncates when space is tight.

Bordered

Full-width row framed by top and bottom border rules. Use at the top of a content area where the breadcrumb doubles as a visual section divider.

Ghost

Each item has a rounded hover-background pill. The active item stays persistently highlighted. Use inside app shells where buttons and breadcrumbs share the same interaction surface.

Account

Items with an avatarSrc render a framed avatar next to a label. Add isDropdown + dropdownItems to turn any item into an account-switcher. Use avatarShape="square" for brand/logo icons and the default "circle" for people.