Create `ZBreadcrumb` component

[yash-deepsource]

Description

To create a breadcrumbs component.

Tasks

• PLT-4615: Create ZBreadcrumb component logic
• PLT-4616: Create ZBreadcrumbItem component logic
• PLT-4617: Create ZBreadcrumb Design spec

Spec discussed in #8

^{Originally posted by yash-deepsource May 12, 2022}

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.

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
isCurrent	false	Indicates whether a breadcrumb is the current page, or not.
separator	'/'	Separator of type string that separates the breadcrumbs.

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. Overrides the value of ZBreadcrumb's separator if specified.

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>