Overwrite breadcrumb Items

I am having issues overwriting the items props for breadcrumbs in my react app. The image shows the code for this.

import * as React from "react";
import {
} from "./plasmic/map_map/PlasmicDashboardContent";
import { HTMLElementRefOf } from "@plasmicapp/react-web";
import { AntdBreadcrumbItem } from "@plasmicpkgs/antd5/skinny/registerBreadcrumb"

export interface DashboardContentProps extends DefaultDashboardContentProps {}

function DashboardContent_(
  props: DashboardContentProps,
  ref: HTMLElementRefOf<"div">
) {

  const folders = ['Folder 1', 'Folder 2']

  return <PlasmicDashboardContent
      style: {
        color: 'white'
      items: folders.map((folder, index) => <AntdBreadcrumbItem style={{color: 'red'}}>{ folder }</AntdBreadcrumbItem>)
    root={{ ref }}

const DashboardContent = React.forwardRef(DashboardContent_);
export default DashboardContent;

Above is my code that shows how I am trying to overwrite the breadcrumb items. After running this code, I still see the default breadcrumb items from my plasmic studio.

Hello @devs_hub-hub.

Can you link the project ID that this is happening?
My guess is that you’re missing the props field:

folderBreadcrumbs= {{
  props: {
    items: ...

Hi Icaro,

when exactly does one need to wraps props with:

props: {
     propName: ...    

I have done this when I started using Plasmic. then I was told - and I realized - that this was not necessary.

Anyway - this suggestion does not work

The problem is that nothing that is passed inside of items will be displayed
instead, we see the breadcrumb items that were set in plasmic studio

Please send your project id.

This is the project id


Can you try using the prop itemsRaw instead of items?

1 Like

This worked. Thank you.

I don’t know about this …Raw and …Render.
Where can I learn more?

Hello @johannes_horteis.

This is something specific that we did for a better experience. You can see the implementation here.

1 Like