The Breadcrumbs component is a navigational helper for pages. It can accept a Material Icons icon or text characters as a divider. An array of objects can be passed to the items property of the component. Additionally, slots exists for more control of the breadcrumbs.


By default, breadcrumbs use a text divider. This can be any string.



The array of item in the items prop.

type items = Array<item>;
type item = {
  disabled?: false;
  href?: '';
  text: '';
  class?: '';
  props?: {};


Below is a collection of simple to complex examples.


Basic examples for breadcrumbs.

Custom Divider

Breadcrumbs separator can be set using divider slot. You can also use material icons as dividers.


You can use the default slot to customize each breadcrumb item. Remember to add class s-breadcrumb-item to each item to add the default styles.

Ready For More?

Continue to learn more about svelte materialify with content selected by the creator.

Last Updated: 2021-09-02