Class ZetaBreadcrumb

The breadcrumb is a secondary navigation patten that helps a user understand the hierarchy among levels and navigate back through them.

Figma

https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?node-id=229-5&node-type=canvas&m=dev

Storybook

https://zeta-ds.web.app/web/storybook/index.html?path=/docs/breadcrumb--docs

Hierarchy

  • ContourableInterface<this> & LitElement<this> & InteractiveInterface<this>
    • ZetaBreadcrumb

Other

constructor disabled items itemsTruncated maxItems rounded styles

rendering

render

Other

constructor

  • new ZetaBreadcrumb(): ZetaBreadcrumb

  • Returns ZetaBreadcrumb

disabled

disabled: boolean

items

items: HTMLElement[]

itemsTruncated

itemsTruncated: (HTMLElement | TemplateResult)[] = []

maxItems

maxItems: number = 0

The maximum number of items to display in the breadcrumb. For example, if the value is 3 and there are 5 items in the breadcrumb:

  • The first item will always be displayed.
  • The last 2 items will always be displayed.
  • The rest of the items will be truncated and displayed in a more menu.

rounded

rounded: boolean

Staticstyles

styles: CSSResultGroup[] = ...

rendering

Protectedrender

  • render(): TemplateResult<1>

  • Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html's ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

    Returns TemplateResult<1>

Settings

Member Visibility

On This Page

Other
rendering