From d25233fdf75853b6ada356fb06593e0d81ff2053 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Tue, 18 Apr 2023 14:23:40 +0200
Subject: [PATCH] [Doc] Add more details about `useDefineAppLocation` in the
`MultiLevelMenu` docs
---
docs/MultiLevelMenu.md | 25 ++++++++++++++++++++++++-
1 file changed, 24 insertions(+), 1 deletion(-)
diff --git a/docs/MultiLevelMenu.md b/docs/MultiLevelMenu.md
index 9823656baa8..710ac5ea566 100644
--- a/docs/MultiLevelMenu.md
+++ b/docs/MultiLevelMenu.md
@@ -62,7 +62,30 @@ export const MyLayout = (props) => (
);
```
-`<AppLocationContext>` is necessary because `ra-navigation` doesn't use the URL to detect the current location. Instead, page components *declare* their location using a custom hook (`useDefineAppLocation()`). This allows complex site maps, with multiple levels of nesting. That's the reason why each `<MultiLevelMenu.Item>` requires a unique `name`, that matches a particular page location. Check [the ra-navigation documentation](https://marmelab.com/ra-enterprise/modules/ra-navigation) to learn more about App Location.
+`<AppLocationContext>` is necessary because `ra-navigation` doesn't use the URL to detect the current location. Instead, page components *declare* their location using a custom hook (`useDefineAppLocation()`). This allows complex site maps, with multiple levels of nesting. That's the reason why each `<MultiLevelMenu.Item>` requires a unique `name`, that matches a particular page location.
+
+You can set the `AppLocation` for a given page like so:
+
+```jsx
+import { useDefineAppLocation } from '@react-admin/ra-navigation';
+
+const ArtistRockList = () => {
+ useDefineAppLocation('artists.rock');
+ return <h1>Artist Rock List</h1>;
+};
+```
+
+And then use this `AppLocation` as `name` for `<MultiLevelMenu.Item>`:
+
+```jsx
+<MultiLevelMenu.Item
+ name="artists.rock"
+ to={'/artists/rock'}
+ label="Rock"
+>
+```
+
+Check [the ra-navigation documentation](https://marmelab.com/ra-enterprise/modules/ra-navigation) to learn more about App Location.
Finally, pass this custom layout to the `<Admin>` component