Deepyr Documentation

Breadcrumbs

The Breadcrumbs component automatically wraps each child in an <li> tag.

Breadcrumbs(
  style: [TextUtil.sm],
  [
    Link([text('Home')], href: '#', style: [Link.hover]),
    Link([text('Documents')], href: '#', style: [Link.hover]),
    span([text('Add Document')]),
  ],
)

Breadcrumbs with icons

// Helper function to create the SVG icon component
Component _folderIcon() => svg(
  // ... svg attributes and path
);

Breadcrumbs(
  style: [TextUtil.sm],
  [
    Link(
      [
        _folderIcon(),
        text('Home'),
      ],
      href: '#',
      style: [Link.hover, Layout.inlineFlex, Layout.gap2, Alignment.itemsCenter],
    ),
    Link(
      [
        _folderIcon(),
        text('Documents'),
      ],
      href: '#',
      style: [Link.hover, Layout.inlineFlex, Layout.gap2, Alignment.itemsCenter],
    ),
    span(
      [
        _addDocumentIcon(),
        text('Add Document'),
      ],
      classes: [Layout.inlineFlex, Layout.gap2, Alignment.itemsCenter].toClasses(),
    ),
  ],
)

Breadcrumbs with max-width

If the list gets larger than the container, it will scroll horizontally.

Breadcrumbs(
  style: [Size.maxWxs, TextUtil.sm],
  [
    span([text('Long text 1')]),
    span([text('Long text 2')]),
    span([text('Long text 3')]),
    span([text('Long text 4')]),
    span([text('Long text 5')]),
  ],
)