@contentful/f36-navbar 6.7.0 → 6.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.mdx +244 -39
- package/package.json +10 -10
package/README.mdx
CHANGED
|
@@ -8,30 +8,123 @@ storybook: 'https://f36-storybook.contentful.com/?path=/story/components-navbar'
|
|
|
8
8
|
typescript: ./src/Navbar.tsx,./src/NavbarAccount/NavbarAccount.tsx,./src/NavbarBadge/NavbarBadge.tsx,./src/NavbarItem/NavbarItem.tsx,./src/NavbarMenuItem/NavbarMenuItem.tsx,./src/NavbarSubmenu/NavbarSubmenu.tsx,./src/NavbarSwitcher/NavbarSwitcher.tsx,
|
|
9
9
|
---
|
|
10
10
|
|
|
11
|
-
The Navbar component represents the main top navigation across all Contentful Products.
|
|
12
|
-
|
|
13
|
-
## Introduction
|
|
11
|
+
The `Navbar` component represents the main top navigation across all Contentful Products.
|
|
14
12
|
|
|
15
13
|
The `Navbar` component is composed of multiple predefined areas, each configurable through dedicated props. It does not accept children directly. All areas are designed with responsiveness in mind and will appear or disappear based on screen breakpoints.
|
|
16
14
|
|
|
17
|
-
|
|
15
|
+
## Import
|
|
16
|
+
|
|
17
|
+
```jsx static=true
|
|
18
|
+
import { Navbar } from '@contentful/f36-navbar';
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Navbar Compound Components
|
|
18
22
|
|
|
19
23
|
The `Navbar` exports the following compound components
|
|
20
24
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
25
|
+
<Table>
|
|
26
|
+
<Table.Head>
|
|
27
|
+
<Table.Row>
|
|
28
|
+
<Table.Cell>
|
|
29
|
+
<Subheading>Compound Component</Subheading>
|
|
30
|
+
</Table.Cell>
|
|
31
|
+
<Table.Cell>
|
|
32
|
+
<Subheading>Description</Subheading>
|
|
33
|
+
</Table.Cell>
|
|
34
|
+
<Table.Cell>
|
|
35
|
+
<Subheading>Typical Usage Area</Subheading>
|
|
36
|
+
</Table.Cell>
|
|
37
|
+
</Table.Row>
|
|
38
|
+
</Table.Head>
|
|
39
|
+
<Table.Body>
|
|
40
|
+
<Table.Row>
|
|
41
|
+
<Table.Cell>`<Navbar.Item>`</Table.Cell>
|
|
42
|
+
<Table.Cell>
|
|
43
|
+
Represents a main navigation item. Use it as a child of the `<Navbar>` component or the `bottomRightItems` prop of Navbar.
|
|
44
|
+
</Table.Cell>
|
|
45
|
+
<Table.Cell>`mainNavigation`, `secondaryNavigation`</Table.Cell>
|
|
46
|
+
</Table.Row>
|
|
47
|
+
<Table.Row>
|
|
48
|
+
<Table.Cell>`<Navbar.MenuItem>`</Table.Cell>
|
|
49
|
+
<Table.Cell>
|
|
50
|
+
Represents an individual menu item, typically used to create dropdowns. Use it as a child of either `<Navbar.Item>` or `<Navbar.Account>`.
|
|
51
|
+
</Table.Cell>
|
|
52
|
+
<Table.Cell>`mobileNavigation`, `account`</Table.Cell>
|
|
53
|
+
</Table.Row>
|
|
54
|
+
<Table.Row>
|
|
55
|
+
<Table.Cell>`<Navbar.Submenu>`</Table.Cell>
|
|
56
|
+
<Table.Cell>
|
|
57
|
+
Wraps one or more `<Navbar.MenuItem>` components to create a nested menu within the `mobileNavigation` area.
|
|
58
|
+
</Table.Cell>
|
|
59
|
+
<Table.Cell>`mobileNavigation`</Table.Cell>
|
|
60
|
+
</Table.Row>
|
|
61
|
+
<Table.Row>
|
|
62
|
+
<Table.Cell>`<Navbar.MenuDivider>`</Table.Cell>
|
|
63
|
+
<Table.Cell>
|
|
64
|
+
A visual separator for menu items. Use it before or after a `<Navbar.MenuItem>`. Alias for `MenuDivider` from the `Menu` component.
|
|
65
|
+
</Table.Cell>
|
|
66
|
+
<Table.Cell>`mobileNavigation`, `account`</Table.Cell>
|
|
67
|
+
</Table.Row>
|
|
68
|
+
<Table.Row>
|
|
69
|
+
<Table.Cell>`<Navbar.MenuSectionTitle>`</Table.Cell>
|
|
70
|
+
<Table.Cell>
|
|
71
|
+
A title that can be used in the menu list. Use it before or after a `<Navbar.MenuItem>`. Alias for `MenuSectionTitle` from the `Menu` component.
|
|
72
|
+
</Table.Cell>
|
|
73
|
+
<Table.Cell>`mobileNavigation`, `account`</Table.Cell>
|
|
74
|
+
</Table.Row>
|
|
75
|
+
<Table.Row>
|
|
76
|
+
<Table.Cell>`<Navbar.Switcher>`</Table.Cell>
|
|
77
|
+
<Table.Cell>
|
|
78
|
+
Wrapper component for the space and environment information. Use it as a child of the Navbar `switcher` prop.
|
|
79
|
+
</Table.Cell>
|
|
80
|
+
<Table.Cell>`switcher`</Table.Cell>
|
|
81
|
+
</Table.Row>
|
|
82
|
+
<Table.Row>
|
|
83
|
+
<Table.Cell>`<Navbar.Account>`</Table.Cell>
|
|
84
|
+
<Table.Cell>
|
|
85
|
+
Trigger for the account menu. Use it as a child of the Navbar `account` prop.
|
|
86
|
+
</Table.Cell>
|
|
87
|
+
<Table.Cell>`account`</Table.Cell>
|
|
88
|
+
</Table.Row>
|
|
89
|
+
<Table.Row>
|
|
90
|
+
<Table.Cell>`<Navbar.Badge>`</Table.Cell>
|
|
91
|
+
<Table.Cell>
|
|
92
|
+
Represents an item that provides additional information, such as indicating that the user's space is on a trial. Use as a child of the Navbar `badge`.
|
|
93
|
+
</Table.Cell>
|
|
94
|
+
<Table.Cell>`promotions`, `badge`</Table.Cell>
|
|
95
|
+
</Table.Row>
|
|
96
|
+
<Table.Row>
|
|
97
|
+
<Table.Cell>`<Navbar.ItemSkeleton>`</Table.Cell>
|
|
98
|
+
<Table.Cell>
|
|
99
|
+
Loading skeleton for `<Navbar.Item>`. Use it as a child of the `<Navbar>` component or the `bottomRightItems` prop of Navbar.
|
|
100
|
+
</Table.Cell>
|
|
101
|
+
<Table.Cell>`mainNavigation`, `secondaryNavigation`</Table.Cell>
|
|
102
|
+
</Table.Row>
|
|
103
|
+
<Table.Row>
|
|
104
|
+
<Table.Cell>`<Navbar.MenuItemSkeleton>`</Table.Cell>
|
|
105
|
+
<Table.Cell>
|
|
106
|
+
Loading skeleton for `<Navbar.MenuItem>`. Use it as a child of `<Navbar.Item>`, `<Navbar.Account>`, or `<Navbar.Help>`.
|
|
107
|
+
</Table.Cell>
|
|
108
|
+
<Table.Cell>`mobileNavigation`, `account`, `help`</Table.Cell>
|
|
109
|
+
</Table.Row>
|
|
110
|
+
<Table.Row>
|
|
111
|
+
<Table.Cell>`<Navbar.SwitcherSkeleton>`</Table.Cell>
|
|
112
|
+
<Table.Cell>
|
|
113
|
+
Loading skeleton for `<Navbar.Switcher>`. Use it as a child of the Navbar `switcher` prop.
|
|
114
|
+
</Table.Cell>
|
|
115
|
+
<Table.Cell>`switcher`</Table.Cell>
|
|
116
|
+
</Table.Row>
|
|
117
|
+
<Table.Row>
|
|
118
|
+
<Table.Cell>`<Navbar.AccountSkeleton>`</Table.Cell>
|
|
119
|
+
<Table.Cell>
|
|
120
|
+
Loading skeleton for `<Navbar.Account>`. Use it as a child of the Navbar `account` prop.
|
|
121
|
+
</Table.Cell>
|
|
122
|
+
<Table.Cell>`account`</Table.Cell>
|
|
123
|
+
</Table.Row>
|
|
124
|
+
</Table.Body>
|
|
125
|
+
</Table>
|
|
126
|
+
|
|
127
|
+
<br />
|
|
35
128
|
|
|
36
129
|
#### Navbar.Account
|
|
37
130
|
|
|
@@ -59,12 +152,6 @@ These compound components are used as children of a `Navbar.Item` or as children
|
|
|
59
152
|
|
|
60
153
|
The `Navbar.Switcher` component is used for displaying the current space and environment names. It can also be used as trigger element to open a space switcher menu. It should always be used inside the `switcher` area property to ensure proper positioning.
|
|
61
154
|
|
|
62
|
-
## Import
|
|
63
|
-
|
|
64
|
-
```jsx static=true
|
|
65
|
-
import { Navbar } from '@contentful/f36-navbar';
|
|
66
|
-
```
|
|
67
|
-
|
|
68
155
|
## Examples
|
|
69
156
|
|
|
70
157
|
### Basic usage
|
|
@@ -101,27 +188,145 @@ import { Navbar } from '@contentful/f36-navbar';
|
|
|
101
188
|
|
|
102
189
|
The Navbar component supports responsiveness. Different areas of the navbar will disappear on some breakpoints. Find the detailed information in the table below.
|
|
103
190
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
191
|
+
<Table>
|
|
192
|
+
<Table.Head>
|
|
193
|
+
<Table.Row>
|
|
194
|
+
<Table.Cell>
|
|
195
|
+
<Subheading>Prop</Subheading>
|
|
196
|
+
</Table.Cell>
|
|
197
|
+
<Table.Cell>
|
|
198
|
+
<Subheading>Description</Subheading>
|
|
199
|
+
</Table.Cell>
|
|
200
|
+
<Table.Cell>
|
|
201
|
+
<Subheading>Breakpoints</Subheading>
|
|
202
|
+
</Table.Cell>
|
|
203
|
+
<Table.Cell>
|
|
204
|
+
<Subheading>Recommended Compound Component</Subheading>
|
|
205
|
+
</Table.Cell>
|
|
206
|
+
</Table.Row>
|
|
207
|
+
</Table.Head>
|
|
208
|
+
<Table.Body>
|
|
209
|
+
<Table.Row>
|
|
210
|
+
<Table.Cell>`logo`</Table.Cell>
|
|
211
|
+
<Table.Cell>
|
|
212
|
+
Allows to overwrite the Contentful logo with a custom logo and link.
|
|
213
|
+
This ensures a consistent and intuitive navigation experience throughout
|
|
214
|
+
the application.
|
|
215
|
+
</Table.Cell>
|
|
216
|
+
<Table.Cell>Always visible</Table.Cell>
|
|
217
|
+
<Table.Cell>Custom element</Table.Cell>
|
|
218
|
+
</Table.Row>
|
|
219
|
+
<Table.Row>
|
|
220
|
+
<Table.Cell>`mainNavigation`</Table.Cell>
|
|
221
|
+
<Table.Cell>
|
|
222
|
+
Main navigation items. Each main navigation item should use the
|
|
223
|
+
`Navbar.Item` compound component. This area is responsive and will be
|
|
224
|
+
visible starting from the default breakpoint `867px`. This can be
|
|
225
|
+
overwritten in the `mobileNavigationProps` and changed to `breakpoint:
|
|
226
|
+
'medium'` (`1024px`).
|
|
227
|
+
</Table.Cell>
|
|
228
|
+
<Table.Cell>`867px` (default), configurable</Table.Cell>
|
|
229
|
+
<Table.Cell>`Navbar.Item`</Table.Cell>
|
|
230
|
+
</Table.Row>
|
|
231
|
+
<Table.Row>
|
|
232
|
+
<Table.Cell>`mobileNavigation`</Table.Cell>
|
|
233
|
+
<Table.Cell>
|
|
234
|
+
Allows navigation on smaller screen devices. Visible until the default
|
|
235
|
+
breakpoint of `867px`. Items in this area should use `Navbar.MenuItem`
|
|
236
|
+
and `Navbar.Submenu` compound components. The breakpoint can be changed
|
|
237
|
+
using `mobileNavigationProps` to `small: 867px` or `medium: 1024px`. You
|
|
238
|
+
can also set a custom label for the mobile navigation trigger button.
|
|
239
|
+
</Table.Cell>
|
|
240
|
+
<Table.Cell>`<867px` (default), configurable</Table.Cell>
|
|
241
|
+
<Table.Cell>`Navbar.MenuItem`, `Navbar.Submenu`</Table.Cell>
|
|
242
|
+
</Table.Row>
|
|
243
|
+
<Table.Row>
|
|
244
|
+
<Table.Cell>`secondaryNavigation`</Table.Cell>
|
|
245
|
+
<Table.Cell>
|
|
246
|
+
Contains additional navigation items, like Search, Help, etc. Items in
|
|
247
|
+
this area should use the `Navbar.Item` compound component with only an
|
|
248
|
+
icon and no `title`. This area is responsive and will be visible
|
|
249
|
+
starting from the breakpoint `576px`.
|
|
250
|
+
</Table.Cell>
|
|
251
|
+
<Table.Cell>`576px` and up</Table.Cell>
|
|
252
|
+
<Table.Cell>`Navbar.Item` (icon-only)</Table.Cell>
|
|
253
|
+
</Table.Row>
|
|
254
|
+
<Table.Row>
|
|
255
|
+
<Table.Cell>`promotions`</Table.Cell>
|
|
256
|
+
<Table.Cell>
|
|
257
|
+
In this area, you can add any additional items you want accessible on
|
|
258
|
+
the Navbar, such as feedback links or other types of promotions. This
|
|
259
|
+
area is responsive and will not be visible until the breakpoint
|
|
260
|
+
`1200px`.
|
|
261
|
+
</Table.Cell>
|
|
262
|
+
<Table.Cell>`1200px` and up</Table.Cell>
|
|
263
|
+
<Table.Cell>`Navbar.Badge` or Custom element</Table.Cell>
|
|
264
|
+
</Table.Row>
|
|
265
|
+
<Table.Row>
|
|
266
|
+
<Table.Cell>`switcher`</Table.Cell>
|
|
267
|
+
<Table.Cell>
|
|
268
|
+
Reserved for the `Navbar.Switcher` component to display the name of the
|
|
269
|
+
current space and environment.
|
|
270
|
+
</Table.Cell>
|
|
271
|
+
<Table.Cell>Always visible</Table.Cell>
|
|
272
|
+
<Table.Cell>`Navbar.Switcher`</Table.Cell>
|
|
273
|
+
</Table.Row>
|
|
274
|
+
<Table.Row>
|
|
275
|
+
<Table.Cell>`account`</Table.Cell>
|
|
276
|
+
<Table.Cell>
|
|
277
|
+
Meant for the user's account menu. Use the `Navbar.Account` compound
|
|
278
|
+
component to build it. This area is responsive and will be visible
|
|
279
|
+
starting from `576px`; before that, it should be made available inside
|
|
280
|
+
the `mobileNavigation`.
|
|
281
|
+
</Table.Cell>
|
|
282
|
+
<Table.Cell>`576px` and up</Table.Cell>
|
|
283
|
+
<Table.Cell>`Navbar.Account`</Table.Cell>
|
|
284
|
+
</Table.Row>
|
|
285
|
+
</Table.Body>
|
|
286
|
+
</Table>
|
|
113
287
|
|
|
114
288
|
## Accessibility
|
|
115
289
|
|
|
116
290
|
Each `Menu.Item` offers and increased click-able area and the whole navigation is accessible via keyboard.
|
|
117
291
|
To further improve the accessibility, each Navbar area has a `aria-label`. These labels can be set via the `aria` prop oobject. Make sure to set a label for every `Menu.Item` in Icon-only modus, this is used to describe the Item for visually impaired users.
|
|
118
292
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
293
|
+
<Table>
|
|
294
|
+
<Table.Head>
|
|
295
|
+
<Table.Row>
|
|
296
|
+
<Table.Cell>
|
|
297
|
+
<Subheading>Prop</Subheading>
|
|
298
|
+
</Table.Cell>
|
|
299
|
+
<Table.Cell>
|
|
300
|
+
<Subheading>Description</Subheading>
|
|
301
|
+
</Table.Cell>
|
|
302
|
+
<Table.Cell>
|
|
303
|
+
<Subheading>Default Setting</Subheading>
|
|
304
|
+
</Table.Cell>
|
|
305
|
+
</Table.Row>
|
|
306
|
+
</Table.Head>
|
|
307
|
+
<Table.Body>
|
|
308
|
+
<Table.Row>
|
|
309
|
+
<Table.Cell>`aria.labelMainNavigation`</Table.Cell>
|
|
310
|
+
<Table.Cell>Aria label for the main navigation area.</Table.Cell>
|
|
311
|
+
<Table.Cell>`'Main Navigation'`</Table.Cell>
|
|
312
|
+
</Table.Row>
|
|
313
|
+
<Table.Row>
|
|
314
|
+
<Table.Cell>`aria.labelSecondaryNavigation`</Table.Cell>
|
|
315
|
+
<Table.Cell>Aria label for the secondary navigation area.</Table.Cell>
|
|
316
|
+
<Table.Cell>`'Secondary Navigation'`</Table.Cell>
|
|
317
|
+
</Table.Row>
|
|
318
|
+
<Table.Row>
|
|
319
|
+
<Table.Cell>`aria.labelPromotions`</Table.Cell>
|
|
320
|
+
<Table.Cell>Aria label for the promotions area.</Table.Cell>
|
|
321
|
+
<Table.Cell>`'Promotions'`</Table.Cell>
|
|
322
|
+
</Table.Row>
|
|
323
|
+
<Table.Row>
|
|
324
|
+
<Table.Cell>`aria.labelAccount`</Table.Cell>
|
|
325
|
+
<Table.Cell>Aria label for the account navigation area.</Table.Cell>
|
|
326
|
+
<Table.Cell>`'Account Navigation'`</Table.Cell>
|
|
327
|
+
</Table.Row>
|
|
328
|
+
</Table.Body>
|
|
329
|
+
</Table>
|
|
125
330
|
|
|
126
331
|
## Props (API reference)
|
|
127
332
|
|
package/package.json
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-navbar",
|
|
3
|
-
"version": "6.7.
|
|
3
|
+
"version": "6.7.2",
|
|
4
4
|
"description": "Forma 36: Navbar component",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "tsup"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@contentful/f36-core": "^6.7.
|
|
10
|
-
"@contentful/f36-menu": "^6.7.
|
|
11
|
-
"@contentful/f36-avatar": "^6.7.
|
|
12
|
-
"@contentful/f36-button": "^6.7.
|
|
9
|
+
"@contentful/f36-core": "^6.7.2",
|
|
10
|
+
"@contentful/f36-menu": "^6.7.2",
|
|
11
|
+
"@contentful/f36-avatar": "^6.7.2",
|
|
12
|
+
"@contentful/f36-button": "^6.7.2",
|
|
13
13
|
"@contentful/f36-tokens": "^6.1.0",
|
|
14
|
-
"@contentful/f36-icon": "^6.7.
|
|
15
|
-
"@contentful/f36-icons": "^6.7.
|
|
16
|
-
"@contentful/f36-tooltip": "^6.7.
|
|
17
|
-
"@contentful/f36-typography": "^6.7.
|
|
14
|
+
"@contentful/f36-icon": "^6.7.2",
|
|
15
|
+
"@contentful/f36-icons": "^6.7.2",
|
|
16
|
+
"@contentful/f36-tooltip": "^6.7.2",
|
|
17
|
+
"@contentful/f36-typography": "^6.7.2",
|
|
18
18
|
"@contentful/f36-utils": "^6.1.0",
|
|
19
|
-
"@contentful/f36-skeleton": "^6.7.
|
|
19
|
+
"@contentful/f36-skeleton": "^6.7.2",
|
|
20
20
|
"@emotion/css": "^11.13.5"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|