Skip to content

Commit 4966c04

Browse files
fzaninottofzaninotto
committed
Reorganize
1 parent ae638d2 commit 4966c04

File tree

1 file changed

+91
-56
lines changed

1 file changed

+91
-56
lines changed

‎docs/HorizontalMenu.md‎

Lines changed: 91 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,17 @@ title: "HorizontalMenu"
55

66
# `<HorizontalMenu>`
77

8-
A horizontal menu component, alternative to react-admin's `<Menu>`, to be used in the AppBar of the `<ContainerLayout>`.
8+
This [Enterprise Edition](https://react-admin-ee.marmelab.com)<img class="icon" src="./img/premium.svg" /> renders a horizontal menu component, alternative to react-admin's `<Menu>`, to be used in the AppBar of the [`<ContainerLayout>`](./ContainerLayout.md).
99

1010
![Container layout](./img/container-layout.png)
1111

12+
`<HorizontalMenu>` is part of the [ra-navigation](https://react-admin-ee.marmelab.com/documentation/ra-navigation#containerlayout) package.
13+
1214
## Usage
1315

14-
Create a menu component based on `<HorizontalMenu>` and `<HorizontalMenu.Item>` (or `<HorizontalMenu.DashboardItem>`) children. Each child should have a `value` corresponding to the [application location](https://react-admin-ee.marmelab.com/documentation/ra-navigation#concepts) of the target, and can have a `to` prop corresponding to the target location if different from the app location.
16+
Create a menu component based on `<HorizontalMenu>` and `<HorizontalMenu.Item>` (or `<HorizontalMenu.DashboardItem>`) children.
17+
18+
Each child should have a `value` corresponding to the [application location](https://react-admin-ee.marmelab.com/documentation/ra-navigation#concepts) of the target, and can have a `to` prop corresponding to the target location if different from the app location.
1519

1620
```jsx
1721
import { HorizontalMenu } from '@react-admin/ra-navigation';
@@ -21,11 +25,16 @@ export const Menu = () => (
2125
<HorizontalMenu.DashboardItem label="Dashboard" value="" />
2226
<HorizontalMenu.Item label="Songs" to="/songs" value="songs" />
2327
<HorizontalMenu.Item label="Artists" to="/artists" value="artists" />
28+
<HorizontalMenu.Item label="Business" value="business">
29+
<HorizontalMenu.Item label="Producers" to="/producers" value="producers" />
30+
<HorizontalMenu.Item label="Label" to="/label" value="label" />
31+
</HorizontalMenu.Item>
32+
<HorizontalMenu.Item label="Custom" to="/custom" value="custom" />
2433
</HorizontalMenu>
2534
);
2635
```
2736

28-
Then pass it to the `<ContainerLayout>`:
37+
Then pass it to ta custom layout based on `<ContainerLayout>`, and make it the `<Admin layout>`:
2938

3039
```jsx
3140
import { Admin, Resource } from 'react-admin';
@@ -46,17 +55,43 @@ const App = () => (
4655
);
4756
```
4857

49-
## Prop
58+
## Props
59+
60+
`<HorizontalMenu>` accepts the following props:
5061

5162
| Prop | Required | Type | Default | Description |
5263
| -------------- | -------- | --------- | ----------- | ---------------------------------------------------------------------------------------- |
64+
| `children` | Optional | | | The menu items to display. |
5365
| `hasDashboard` | Optional | Boolean | | Display an `<HorizontalMenu.DashboardItem>` with your resources if no children specified |
5466

5567
It also accept the props of [MUI Tabs](https://mui.com/material-ui/api/tabs/#props).
5668

69+
## `children`
70+
71+
When you use `<HorizontalMenu>` without any child, it automatically adds one menu item per resource.
72+
73+
If you want to customize the menu items, pass them as children to the `<HorizontalMenu>`. Each child should be a [`<HorizontalMenu.Item>`](#horizontalmenuitem) or a [`<HorizontalMenu.DashboardItem>`](#horizontalmenudashboarditem).
74+
75+
```jsx
76+
import { HorizontalMenu } from '@react-admin/ra-navigation';
77+
78+
export const Menu = () => (
79+
<HorizontalMenu>
80+
<HorizontalMenu.DashboardItem label="Dashboard" value="" />
81+
<HorizontalMenu.Item label="Songs" to="/songs" value="songs" />
82+
<HorizontalMenu.Item label="Artists" to="/artists" value="artists" />
83+
<HorizontalMenu.Item label="Business" value="business">
84+
<HorizontalMenu.Item label="Producers" to="/producers" value="producers" />
85+
<HorizontalMenu.Item label="Label" to="/label" value="label" />
86+
</HorizontalMenu.Item>
87+
<HorizontalMenu.Item label="Custom" to="/custom" value="custom" />
88+
</HorizontalMenu>
89+
);
90+
```
91+
5792
## `hasDashboard`
5893

59-
When you're using `<HorizontalMenu>` without any child, it detects your resources and adds dedicated `<HorizontalMenu.Item>` components for you. You can specify that you want a `<HorizontalMenu.DashboardItem>` with it thanks to the `hasDashboard` prop.
94+
This prop lets you add a dashboard item when using `<HorizontalMenu>` with no children.
6095

6196
```tsx
6297
import { ContainerLayout, HorizontalMenu } from '@react-admin/ra-navigation';
@@ -70,7 +105,7 @@ const MyLayout = ({ children }) => (
70105

71106
## `<HorizontalMenu.Item>`
72107

73-
An item for the `<HorizontalMenu>` component. Used to define access to a resource or a custom route.
108+
An item for the `<HorizontalMenu>` component. Used to define access to a list view for a resource, or a custom route.
74109

75110
```tsx
76111
<HorizontalMenu>
@@ -92,41 +127,62 @@ An item for the `<HorizontalMenu>` component. Used to define access to a resourc
92127
| `MenuProps` | Optional | [MenuProps](https://mui.com/material-ui/api/menu/#props) | | Additional props of the Menu (`HorizontalMenu.Item` with children) |
93128
| `MenuItemProps` | Optional | [MenuItemProps](https://mui.com/material-ui/api/menu-item/#props) | | Additional props of the MenuItem (children of a `HorizontalMenu.Item`) |
94129

95-
### `value`
130+
### `label`
96131

97-
The `value` passed to the [MUI `Tab`](https://mui.com/material-ui/react-tabs/):
132+
You can customize the label by setting the `label` prop. It is inferred from the `value` prop by default.
133+
134+
`<HorizontalMenu.Item>` uses the i18n layer, so you can translate the label. Check [the Translation chapter](./TranslationTranslating.md) for more information.
98135

99136
```tsx
100137
<HorizontalMenu>
101-
<HorizontalMenu.Item value="artists" />
102-
<HorizontalMenu.Item value="songs" />
138+
<HorizontalMenu.Item label="Artists" value="artists" />
139+
<HorizontalMenu.Item label="ra.custom.path.resource.song" value="songs" />
103140
</HorizontalMenu>
104141
```
105142

106-
### `label`
143+
### `MenuProps`
107144

108-
You can customize the label by setting the `label` prop. It is inferred from the `value` prop by default.
145+
Additional props passed to the [Menu](https://mui.com/material-ui/api/menu/#props) (item displayed if it has children).
109146

110-
`<HorizontalMenu.Item>` uses the i18n layer, so you can translate the label. Check [the Translation chapter](./TranslationTranslating.md) for more information.
147+
{% raw %}
111148

112149
```tsx
113150
<HorizontalMenu>
114-
<HorizontalMenu.Item label="Artists" value="artists" />
115-
<HorizontalMenu.Item label="ra.custom.path.resource.song" value="songs" />
151+
<HorizontalMenu.Item
152+
value="songs"
153+
MenuProps={{ open: true, autoFocus: true }}
154+
>
155+
<HorizontalMenu.Item value="albums" />
156+
<HorizontalMenu.Item value="singles" />
157+
</HorizontalMenu.Item>
116158
</HorizontalMenu>
117159
```
118160

119-
### `to`
161+
{% endraw %}
120162

121-
You can customize the link of your resource by setting the `to` prop. It is inferred from the `value` prop by default as ``/${value}``.
163+
### `MenuItemProps`
164+
165+
Additional props passed to the [MenuItem](https://mui.com/material-ui/api/menu-item/#props) (item displayed in a sub-menu).
166+
167+
{% raw %}
122168

123169
```tsx
124170
<HorizontalMenu>
125-
<HorizontalMenu.Item to="/artists" value="artists" />
126-
<HorizontalMenu.Item to="/musics" value="songs" />
171+
<HorizontalMenu.Item value="songs">
172+
<HorizontalMenu.Item
173+
value="albums"
174+
MenuItemProps={{
175+
divider: true,
176+
selected: isSelected(),
177+
}}
178+
/>
179+
<HorizontalMenu.Item value="singles" />
180+
</HorizontalMenu.Item>
127181
</HorizontalMenu>
128182
```
129183

184+
{% endraw %}
185+
130186
### `TabProps`
131187

132188
Additional props passed to the [Tab](https://mui.com/material-ui/api/tabs/#props).
@@ -149,50 +205,37 @@ const Menu = () => (
149205

150206
{% endraw %}
151207

152-
### `MenuProps`
153-
154-
Additional props passed to the [Menu](https://mui.com/material-ui/api/menu/#props) (item displayed if it has children).
208+
### `to`
155209

156-
{% raw %}
210+
You can customize the link of your resource by setting the `to` prop. It is inferred from the `value` prop by default as ``/${value}``.
157211

158212
```tsx
159213
<HorizontalMenu>
160-
<HorizontalMenu.Item
161-
value="songs"
162-
MenuProps={{ open: true, autoFocus: true }}
163-
>
164-
<HorizontalMenu.Item value="albums" />
165-
<HorizontalMenu.Item value="singles" />
166-
</HorizontalMenu.Item>
214+
<HorizontalMenu.Item to="/artists" value="artists" />
215+
<HorizontalMenu.Item to="/musics" value="songs" />
167216
</HorizontalMenu>
168217
```
169218

170-
{% endraw %}
171-
172-
### `MenuItemProps`
173-
174-
Additional props passed to the [MenuItem](https://mui.com/material-ui/api/menu-item/#props) (item displayed in a sub-menu).
219+
### `value`
175220

176-
{% raw %}
221+
The `value` passed to the [MUI `Tab`](https://mui.com/material-ui/react-tabs/):
177222

178223
```tsx
179224
<HorizontalMenu>
180-
<HorizontalMenu.Item value="songs">
181-
<HorizontalMenu.Item
182-
value="albums"
183-
MenuItemProps={{
184-
divider: true,
185-
selected: isSelected(),
186-
}}
187-
/>
188-
<HorizontalMenu.Item value="singles" />
189-
</HorizontalMenu.Item>
225+
<HorizontalMenu.Item value="artists" />
226+
<HorizontalMenu.Item value="songs" />
190227
</HorizontalMenu>
191228
```
192229

193-
{% endraw %}
230+
## `<HorizontalMenu.DashboardItem>`
194231

195-
### Adding Sub-Menus
232+
This component adds a menu item that redirects to the `/` route. It accepts the same props as [`<HorizontalMenu.Item>`](#horizontalmenuitem).
233+
234+
```tsx
235+
<HorizontalMenu.DashboardItem value="" />
236+
```
237+
238+
## Adding Sub-Menus
196239

197240
<video controls autoplay playsinline muted loop>
198241
<source src="https://react-admin-ee.marmelab.com/assets/horizontal-menu-submenu.mp4" type="video/mp4"/>
@@ -212,11 +255,3 @@ Additional props passed to the [MenuItem](https://mui.com/material-ui/api/menu-i
212255
<HorizontalMenu.Item label="songs" to="/songs" value="songs" />
213256
</HorizontalMenu>
214257
```
215-
216-
## `<HorizontalMenu.DashboardItem>`
217-
218-
This component adds a menu item that redirects to the `/` route. It accepts the same props as [`<HorizontalMenu.Item>`](#horizontalmenuitem).
219-
220-
```tsx
221-
<HorizontalMenu.DashboardItem value="" />
222-
```

0 commit comments

Comments
 (0)