Skip to content

Breadcrumbs

Breadcrumbs is a secondary navigation element that shows a user's current location and a hierarchy among levels. It allows the user to move up to higher levels in the hierarchy or to a previous step.

On websites that have a lot of different pages, breadcrumb navigation can greatly enhance how users find their way around. In terms of usability, it reduces the number of actions a website visitor needs to take in order to get to a higher-level page.

It is also an effective visual aid that indicates the location of the user within the website's hierarchy, making it a great source of contextual information for landing pages.

UX/UI Guidelines

Check the design documentation of the component in ZeroHeight.

Breadcrumbs overview

From Figma to code

...

Customization

INFO

Check everything about the customization mechanics in the "How it works" documentation.

CSS VariableTypeDescription
--z-breadcrumbs--color--activecolor

Accessibility

...