ZBreadcrumbs

[yash-deepsource]

Description

ZBreadcrumbs component(s) involves rendering a trail of navigational tokens (breadcrumbs) that help users understand their current location on the website.

More information on them can be found on MDN.

Design specs for this component can be found here (Internal only).

Components

ZBreadcrumbItem

• The token component that indicates a single breadcrumb in a group of breadcrumbs. It consists of a separator and the breadcrumb value.

Props

Prop	Default	Description
separator	'/'	Separator of type string that separates the breadcrumbs. Overrides the value of ZBreadcrumb's separator if specified.

Overridable classes

Class	Default	Description
text-<color>	'text-vanilla-400'	Color of a breadcrumb when it isn't the currently active page.
current:text-<color>	'current:text-vanilla-100'	Color of a breadcrumb when it is the currently active page.

Preview

TODO

ZBreadcrumb

• The parent component that encapsulates all <ZBreadcrumbItem/>s.

Props

Props	Default	Description
separator	'/'	Separator of type string that separates the breadcrumbs. If a ZBreadcrumbItem specifies its own separator then it overrides the value of this prop.

Overridable classes

Class	Default	Description
text-<size>	'text-base'	Size of text within ZBreadcrumb.

Preview

TODO

Code example

<z-breadcrumb :separator="args.separator"> 
  <z-breadcrumb-item v-for="i in 10" :key="i">Item {{i}}</z-breadcrumb-item>
</z-breadcrumb>