Skip to content

Commit 854aa97

Browse files
djhidjhi
authored
Merge pull request #10983 from marmelab/doc/ra-navigation
Doc(Breadcrumb): Update OSS documentation to add new Breadcrumb components
2 parents 35a53d2 + 3aeda91 commit 854aa97

File tree

1 file changed

+143
-0
lines changed

1 file changed

+143
-0
lines changed

‎docs/Breadcrumb.md‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -567,6 +567,149 @@ const MyBreadcrumbCustomHome = () => (
567567

568568
**Tip:** It's a good practice to include a visually hidden placeholder ('Dashboard' in this example) for screen readers when using an icon as label.
569569

570+
## `<Breadcrumb.ListItem>`
571+
572+
A version of the `<Breadcrumb.Item>` dedicated to list views. It accepts all [`<Breadcrumb.Item>` props](#breadcrumbitem).
573+
574+
It is convenient for building custom breadcrumbs.
575+
576+
```tsx
577+
const MyBreadcrumb = () => (
578+
<Breadcrumb>
579+
<Breadcrumb.ListItem resource="posts">
580+
<Breadcrumb.EditItem resource="posts" />
581+
<Breadcrumb.ShowItem resource="posts" />
582+
<Breadcrumb.CreateItem resource="posts" />
583+
</Breadcrumb.ListItem>
584+
</Breadcrumb>
585+
);
586+
```
587+
588+
## `<Breadcrumb.CreateItem>`
589+
590+
A version of the `<Breadcrumb.Item>` dedicated to create views. It accepts all [`<Breadcrumb.Item>` props](#breadcrumbitem).
591+
592+
It is convenient for building custom breadcrumbs.
593+
594+
```tsx
595+
const MyBreadcrumb = () => (
596+
<Breadcrumb>
597+
<Breadcrumb.ListItem resource="posts">
598+
<Breadcrumb.EditItem resource="posts" />
599+
<Breadcrumb.ShowItem resource="posts" />
600+
<Breadcrumb.CreateItem resource="posts" />
601+
</Breadcrumb.ListItem>
602+
</Breadcrumb>
603+
);
604+
```
605+
606+
## `<Breadcrumb.EditItem>`
607+
608+
A version of the `<Breadcrumb.Item>` dedicated to edit views. It is convenient for building custom breadcrumbs.
609+
610+
It accepts all [`<Breadcrumb.Item>` props](#breadcrumbitem) and an optional `meta` prop that allows you to provide a [`meta`](https://marmelab.com/react-admin/Actions.html#meta-parameter) parameter matching the one set in the `<Edit>` component:
611+
612+
```tsx
613+
const MyBreadcrumb = () => (
614+
<Breadcrumb>
615+
<Breadcrumb.ListItem resource="posts">
616+
<Breadcrumb.EditItem resource="posts" meta={ { test: true } } />
617+
<Breadcrumb.ShowItem resource="posts" />
618+
<Breadcrumb.CreateItem resource="posts" />
619+
</Breadcrumb.ListItem>
620+
</Breadcrumb>
621+
);
622+
623+
const PostEdit = () => (
624+
<Edit queryOptions={ { meta: { test: true } } }>
625+
// ...
626+
</Edit>
627+
);
628+
```
629+
630+
**Tip**: If your `<Edit>` component has a `meta` parameter but manually calls [`useDefineAppLocation`](./useDefineAppLocation.md) and provides it with the record, you don't need to set the `meta` prop on the `<Breadcrumb.EditItem>` as it will read the record from the `AppLocationContext`:
631+
632+
```tsx
633+
const MyBreadcrumb = () => (
634+
<Breadcrumb>
635+
<Breadcrumb.ListItem resource="posts">
636+
{/* meta are not provided here */}
637+
<Breadcrumb.EditItem resource="posts" />
638+
<Breadcrumb.ShowItem resource="posts" />
639+
<Breadcrumb.CreateItem resource="posts" />
640+
</Breadcrumb.ListItem>
641+
</Breadcrumb>
642+
);
643+
644+
const PostEdit = () => (
645+
{/* meta are provided here */}
646+
<Edit queryOptions={ { meta: { test: true } } }>
647+
// ...
648+
</Edit>
649+
);
650+
651+
const PostAppLocation = () => {
652+
const record = useRecordContext();
653+
// Pass the current record in the app location
654+
useDefineAppLocation('posts.edit', { record });
655+
return null;
656+
}
657+
```
658+
659+
## `<Breadcrumb.ShowItem>`
660+
661+
A version of the `<Breadcrumb.Item>` dedicated to show views. It is convenient for building custom breadcrumbs.
662+
663+
It accepts all [`<Breadcrumb.Item>` props](#breadcrumbitem) and an optional `meta` prop that allows you to provide a [`meta`](https://marmelab.com/react-admin/Actions.html#meta-parameter) parameter matching the one set in the `<Show>` component:
664+
665+
```tsx
666+
const MyBreadcrumb = () => (
667+
<Breadcrumb>
668+
<Breadcrumb.ListItem resource="posts">
669+
<Breadcrumb.EditItem resource="posts" />
670+
<Breadcrumb.ShowItem resource="posts" meta={ { test: true } } />
671+
<Breadcrumb.CreateItem resource="posts" />
672+
</Breadcrumb.ListItem>
673+
</Breadcrumb>
674+
);
675+
676+
677+
const PostShow = () => (
678+
<Show queryOptions={ { meta: { test: true } } }>
679+
// ...
680+
</Show>
681+
);
682+
```
683+
684+
**Tip**: If your `<Show>` component has a `meta` parameter but manually calls [`useDefineAppLocation`](./useDefineAppLocation.md) and provides it with the record, you don't need to set the `meta` prop on the `<Breadcrumb.ShowItem>` as it will read the record from the `AppLocationContext`:
685+
686+
```tsx
687+
const MyBreadcrumb = () => (
688+
<Breadcrumb>
689+
<Breadcrumb.ListItem resource="posts">
690+
<Breadcrumb.EditItem resource="posts" />
691+
{/* meta are not provided here */}
692+
<Breadcrumb.ShowItem resource="posts" />
693+
<Breadcrumb.CreateItem resource="posts" />
694+
</Breadcrumb.ListItem>
695+
</Breadcrumb>
696+
);
697+
698+
const PostShow = () => (
699+
{/* meta are provided here */}
700+
<Show queryOptions={ { meta: { test: true } } }>
701+
// ...
702+
</Show>
703+
);
704+
705+
const PostAppLocation = () => {
706+
const record = useRecordContext();
707+
// Pass the current record in the app location
708+
useDefineAppLocation('posts.show', { record });
709+
return null;
710+
}
711+
```
712+
570713
## Admins With A Dashboard
571714

572715
If the app has a home page defined via the [`<Admin dashboard>`](./Admin.md#dashboard) prop, the Breadcrumb will automatically detect it and set the root of the Breadcrumb to this page.

0 commit comments

Comments
 (0)