@atlaskit/navigation-system 9.3.1 → 9.4.1

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.
Files changed (32) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/constellation/index/migration-guide.mdx +338 -150
  3. package/dist/cjs/components/skip-links/focus-element.js +54 -0
  4. package/dist/cjs/components/skip-links/skip-link.js +32 -65
  5. package/dist/cjs/components/skip-links/skip-links-popup.js +26 -4
  6. package/dist/cjs/context/skip-links/use-skip-link-internal.js +5 -3
  7. package/dist/cjs/ui/page-layout/side-nav/side-nav.js +16 -5
  8. package/dist/cjs/ui/page-layout/side-nav/use-expand-side-nav.js +104 -38
  9. package/dist/cjs/ui/page-layout/side-nav/use-toggle-side-nav.js +33 -3
  10. package/dist/es2019/components/skip-links/focus-element.js +49 -0
  11. package/dist/es2019/components/skip-links/skip-link.js +32 -65
  12. package/dist/es2019/components/skip-links/skip-links-popup.js +26 -4
  13. package/dist/es2019/context/skip-links/use-skip-link-internal.js +5 -3
  14. package/dist/es2019/ui/page-layout/side-nav/side-nav.js +16 -5
  15. package/dist/es2019/ui/page-layout/side-nav/use-expand-side-nav.js +104 -38
  16. package/dist/es2019/ui/page-layout/side-nav/use-toggle-side-nav.js +33 -3
  17. package/dist/esm/components/skip-links/focus-element.js +49 -0
  18. package/dist/esm/components/skip-links/skip-link.js +32 -65
  19. package/dist/esm/components/skip-links/skip-links-popup.js +26 -4
  20. package/dist/esm/context/skip-links/use-skip-link-internal.js +5 -3
  21. package/dist/esm/ui/page-layout/side-nav/side-nav.js +16 -5
  22. package/dist/esm/ui/page-layout/side-nav/use-expand-side-nav.js +104 -38
  23. package/dist/esm/ui/page-layout/side-nav/use-toggle-side-nav.js +33 -3
  24. package/dist/types/components/skip-links/focus-element.d.ts +4 -0
  25. package/dist/types/components/skip-links/skip-link.d.ts +2 -1
  26. package/dist/types/context/skip-links/types.d.ts +18 -1
  27. package/dist/types/context/skip-links/use-skip-link-internal.d.ts +3 -3
  28. package/dist/types-ts4.5/components/skip-links/focus-element.d.ts +4 -0
  29. package/dist/types-ts4.5/components/skip-links/skip-link.d.ts +2 -1
  30. package/dist/types-ts4.5/context/skip-links/types.d.ts +18 -1
  31. package/dist/types-ts4.5/context/skip-links/use-skip-link-internal.d.ts +3 -3
  32. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlassian/navigation-system
2
2
 
3
+ ## 9.4.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 9.4.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [`c9a83a4b370b5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c9a83a4b370b5) -
14
+ Focus will now move to the first item in the side nav after expanding via the toggle button or
15
+ when navigating via the skip link. This change is behind the `platform_dst_nav4_skip_link_a11y_1`
16
+ feature gate.
17
+
3
18
  ## 9.3.1
4
19
 
5
20
  ### Patch Changes
package/constellation/index/migration-guide.mdx CHANGED
@@ -1,6 +1,8 @@
1
1
  ---
2
2
  title: Migration guide
3
- description: How to migrate to navigation system from the old Atlassian navigation, side navigation, and page layout packages.
3
+ description:
4
+ How to migrate to navigation system from the old Atlassian navigation, side navigation, and page
5
+ layout packages.
4
6
  order: 4
5
7
  ---
6
8
 
@@ -17,9 +19,10 @@ import { Code } from '@atlaskit/code';
17
19
  .
18
20
  </SectionMessage>
19
21
 
20
- This guide covers migration from the old [page layout](/components/page-layout), [Atlassian navigation](/components/atlassian-navigation),
21
- and [side navigation](/components/side-navigation) to the new navigation system and [side nav items](https://atlaskit.atlassian.com/packages/navigation/side-nav-items).
22
-
22
+ This guide covers migration from the old [page layout](/components/page-layout),
23
+ [Atlassian navigation](/components/atlassian-navigation), and
24
+ [side navigation](/components/side-navigation) to the new navigation system and
25
+ [side nav items](https://atlaskit.atlassian.com/packages/navigation/side-nav-items).
23
26
 
24
27
  ## Page layout
25
28
 
@@ -27,8 +30,8 @@ and [side navigation](/components/side-navigation) to the new navigation system
27
30
 
28
31
  <table>
29
32
  <colgroup>
30
- <col style={{width: '40%'}} />
31
- <col style={{width: '60%'}} />
33
+ <col style={{ width: '40%' }} />
34
+ <col style={{ width: '60%' }} />
32
35
  </colgroup>
33
36
  <thead>
34
37
  <tr>
@@ -38,36 +41,74 @@ and [side navigation](/components/side-navigation) to the new navigation system
38
41
  </thead>
39
42
  <tbody>
40
43
  <tr>
41
- <td><Code>PageLayout</Code></td>
42
- <td><Link href="/components/navigation-system/layout/code#root">Root</Link></td>
43
- </tr>
44
- <tr>
45
- <td><Code>Banner</Code></td>
46
- <td><Link href="/components/navigation-system/layout/code#banner">Banner</Link></td>
47
- </tr>
48
- <tr>
49
- <td><Code>TopNavigation</Code></td>
50
- <td><Link href="/components/navigation-system/layout/code#topnav">TopNav</Link></td>
51
- </tr>
52
- <tr>
53
- <td><Code>LeftSidebar</Code>, <Code>LeftSidebarWithoutResize</Code></td>
54
- <td><Link href="/components/navigation-system/layout/code#sidenav">SideNav</Link></td>
55
- </tr>
56
- <tr>
57
- <td><Code>LeftPanel</Code></td>
58
- <td>No equivalent. Use <Link href="/components/navigation-system/layout/code#sidenav">SideNav</Link> if it's navigation, or <Link href="/components/navigation-system/layout/code#panel">Panel</Link> if it's supplementary content.</td>
59
- </tr>
60
- <tr>
61
- <td><Code>Content</Code>, <Code>Main</Code></td>
62
- <td><Link href="/components/navigation-system/layout/code#main">Main</Link></td>
63
- </tr>
64
- <tr>
65
- <td><Code>RightPanel</Code></td>
66
- <td><Link href="/components/navigation-system/layout/code#panel">Panel</Link></td>
67
- </tr>
68
- <tr>
69
- <td><Code>RightSidebar</Code></td>
70
- <td>No equivalent. Use <Link href="/components/navigation-system/layout/examples#panel">Panel</Link>, or a custom two-column layout inside <Link href="/components/navigation-system/layout/examples#main">Main</Link>.</td>
44
+ <td>
45
+ <Code>PageLayout</Code>
46
+ </td>
47
+ <td>
48
+ <Link href="/components/navigation-system/layout/code#root">Root</Link>
49
+ </td>
50
+ </tr>
51
+ <tr>
52
+ <td>
53
+ <Code>Banner</Code>
54
+ </td>
55
+ <td>
56
+ <Link href="/components/navigation-system/layout/code#banner">Banner</Link>
57
+ </td>
58
+ </tr>
59
+ <tr>
60
+ <td>
61
+ <Code>TopNavigation</Code>
62
+ </td>
63
+ <td>
64
+ <Link href="/components/navigation-system/layout/code#topnav">TopNav</Link>
65
+ </td>
66
+ </tr>
67
+ <tr>
68
+ <td>
69
+ <Code>LeftSidebar</Code>, <Code>LeftSidebarWithoutResize</Code>
70
+ </td>
71
+ <td>
72
+ <Link href="/components/navigation-system/layout/code#sidenav">SideNav</Link>
73
+ </td>
74
+ </tr>
75
+ <tr>
76
+ <td>
77
+ <Code>LeftPanel</Code>
78
+ </td>
79
+ <td>
80
+ No equivalent. Use{' '}
81
+ <Link href="/components/navigation-system/layout/code#sidenav">SideNav</Link> if it's
82
+ navigation, or <Link href="/components/navigation-system/layout/code#panel">Panel</Link> if
83
+ it's supplementary content.
84
+ </td>
85
+ </tr>
86
+ <tr>
87
+ <td>
88
+ <Code>Content</Code>, <Code>Main</Code>
89
+ </td>
90
+ <td>
91
+ <Link href="/components/navigation-system/layout/code#main">Main</Link>
92
+ </td>
93
+ </tr>
94
+ <tr>
95
+ <td>
96
+ <Code>RightPanel</Code>
97
+ </td>
98
+ <td>
99
+ <Link href="/components/navigation-system/layout/code#panel">Panel</Link>
100
+ </td>
101
+ </tr>
102
+ <tr>
103
+ <td>
104
+ <Code>RightSidebar</Code>
105
+ </td>
106
+ <td>
107
+ No equivalent. Use{' '}
108
+ <Link href="/components/navigation-system/layout/examples#panel">Panel</Link>, or a custom
109
+ two-column layout inside{' '}
110
+ <Link href="/components/navigation-system/layout/examples#main">Main</Link>.
111
+ </td>
71
112
  </tr>
72
113
  </tbody>
73
114
  </table>
@@ -76,8 +117,8 @@ and [side navigation](/components/side-navigation) to the new navigation system
76
117
 
77
118
  <table>
78
119
  <colgroup>
79
- <col style={{width: '40%'}} />
80
- <col style={{width: '60%'}} />
120
+ <col style={{ width: '40%' }} />
121
+ <col style={{ width: '60%' }} />
81
122
  </colgroup>
82
123
  <thead>
83
124
  <tr>
@@ -87,19 +128,38 @@ and [side navigation](/components/side-navigation) to the new navigation system
87
128
  </thead>
88
129
  <tbody>
89
130
  <tr>
90
- <td><Code>useCustomSkipLink</Code></td>
91
- <td><Code>useSkipLink</Code> — see <Link href="/components/navigation-system/layout/examples#custom-skip-links">custom skip links</Link></td>
92
- </tr>
93
- <tr>
94
- <td><Code>useLeftSidebarFlyoutLock</Code></td>
95
- <td>No equivalent. Use <Code>useExpandSideNav()</Code> to force the side nav open.</td>
96
- </tr>
97
- <tr>
98
- <td><Code>usePageLayoutResize</Code></td>
99
- <td>No equivalent. Use <Code>useExpandSideNav()</Code> to expand the side nav, or the <Code>onExpand</Code> and <Code>onCollapse</Code> callbacks on <Code>&lt;SideNav&gt;</Code> to track its state.</td>
100
- </tr>
101
- <tr>
102
- <td><Code>useGlobalTheme</Code></td>
131
+ <td>
132
+ <Code>useCustomSkipLink</Code>
133
+ </td>
134
+ <td>
135
+ <Code>useSkipLink</Code> — see{' '}
136
+ <Link href="/components/navigation-system/layout/examples#custom-skip-links">
137
+ custom skip links
138
+ </Link>
139
+ </td>
140
+ </tr>
141
+ <tr>
142
+ <td>
143
+ <Code>useLeftSidebarFlyoutLock</Code>
144
+ </td>
145
+ <td>
146
+ No equivalent. Use <Code>useExpandSideNav()</Code> to force the side nav open.
147
+ </td>
148
+ </tr>
149
+ <tr>
150
+ <td>
151
+ <Code>usePageLayoutResize</Code>
152
+ </td>
153
+ <td>
154
+ No equivalent. Use <Code>useExpandSideNav()</Code> to expand the side nav, or the{' '}
155
+ <Code>onExpand</Code> and <Code>onCollapse</Code> callbacks on <Code>&lt;SideNav&gt;</Code>{' '}
156
+ to track its state.
157
+ </td>
158
+ </tr>
159
+ <tr>
160
+ <td>
161
+ <Code>useGlobalTheme</Code>
162
+ </td>
103
163
  <td>No equivalent. Theme is applied automatically.</td>
104
164
  </tr>
105
165
  </tbody>
@@ -107,7 +167,8 @@ and [side navigation](/components/side-navigation) to the new navigation system
107
167
 
108
168
  ### Constants
109
169
 
110
- The legacy CSS variables are unsafe and encourage rigidity in the layout system. They should be removed:
170
+ The legacy CSS variables are unsafe and encourage rigidity in the layout system. They should be
171
+ removed:
111
172
 
112
173
  - <Code>LEFT_SIDEBAR_WIDTH</Code>
113
174
  - <Code>RIGHT_SIDEBAR_WIDTH</Code>
@@ -116,24 +177,30 @@ The legacy CSS variables are unsafe and encourage rigidity in the layout system.
116
177
  - <Code>BANNER_HEIGHT</Code>
117
178
  - <Code>TOP_NAVIGATION_HEIGHT</Code>
118
179
 
119
- These will be temporarily available from the <Code>@atlaskit/navigation-system/legacy/css-variables</Code> entrypoint.
180
+ These will be temporarily available from the
120
181
 
182
+ <Code>@atlaskit/navigation-system/legacy/css-variables</Code> entrypoint.
121
183
 
122
184
  ## Atlassian navigation
123
185
 
124
- Top nav is for global, cross-app actions only. Items such as the app switcher, search, create,
125
- help, notifications, settings, and profile are consistent across every Atlassian product.
186
+ Top nav is for global, cross-app actions only. Items such as the app switcher, search, create, help,
187
+ notifications, settings, and profile are consistent across every Atlassian product.
126
188
 
127
189
  ### Layout
128
190
 
129
191
  `AtlassianNavigation` is replaced by [`TopNav`](/components/navigation-system/layout/code#topnav).
130
- The old render props (`renderProductHome`, `renderAppSwitcher`, `renderCreate`, etc.) are replaced by three layout slots:
192
+ The old render props (`renderProductHome`, `renderAppSwitcher`, `renderCreate`, etc.) are replaced
193
+ by three layout slots:
131
194
 
132
- - [`TopNavStart`](/components/navigation-system/layout/code#topnavstart) — place the side nav toggle button, app logo, and app switcher here
133
- - [`TopNavMiddle`](/components/navigation-system/layout/code#topnavmiddle) — place search and create here
134
- - [`TopNavEnd`](/components/navigation-system/layout/code#topnavend) — place help, notifications, settings, profile, and sign in here
195
+ - [`TopNavStart`](/components/navigation-system/layout/code#topnavstart) — place the side nav toggle
196
+ button, app logo, and app switcher here
197
+ - [`TopNavMiddle`](/components/navigation-system/layout/code#topnavmiddle) — place search and create
198
+ here
199
+ - [`TopNavEnd`](/components/navigation-system/layout/code#topnavend) — place help, notifications,
200
+ settings, profile, and sign in here
135
201
 
136
- `HORIZONTAL_GLOBAL_NAV_HEIGHT` has no equivalent. Any usage should be refactored out, or hardcoded if necessary.
202
+ `HORIZONTAL_GLOBAL_NAV_HEIGHT` has no equivalent. Any usage should be refactored out, or hardcoded
203
+ if necessary.
137
204
 
138
205
  ### Primary items
139
206
 
@@ -145,8 +212,8 @@ home and app switcher, previously also in this area, now live in `TopNavStart`.
145
212
 
146
213
  <table>
147
214
  <colgroup>
148
- <col style={{width: '40%'}} />
149
- <col style={{width: '60%'}} />
215
+ <col style={{ width: '40%' }} />
216
+ <col style={{ width: '60%' }} />
150
217
  </colgroup>
151
218
  <thead>
152
219
  <tr>
@@ -156,12 +223,23 @@ home and app switcher, previously also in this area, now live in `TopNavStart`.
156
223
  </thead>
157
224
  <tbody>
158
225
  <tr>
159
- <td><Code>AppHome</Code>, <Code>CustomProductHome</Code>, <Code>ProductHome</Code></td>
160
- <td><Link href="/components/navigation-system/top-nav-items/code#applogo">AppLogo</Link> or <Link href="/components/navigation-system/top-nav-items/code#customlogo">CustomLogo</Link> inside <Code>&lt;TopNavStart&gt;</Code></td>
226
+ <td>
227
+ <Code>AppHome</Code>, <Code>CustomProductHome</Code>, <Code>ProductHome</Code>
228
+ </td>
229
+ <td>
230
+ <Link href="/components/navigation-system/top-nav-items/code#applogo">AppLogo</Link> or{' '}
231
+ <Link href="/components/navigation-system/top-nav-items/code#customlogo">CustomLogo</Link>{' '}
232
+ inside <Code>&lt;TopNavStart&gt;</Code>
233
+ </td>
161
234
  </tr>
162
235
  <tr>
163
- <td><Code>AppSwitcher</Code>, <Code>AppSwitcherNav4</Code></td>
164
- <td><Link href="/components/navigation-system/top-nav-items/code#appswitcher">AppSwitcher</Link> inside <Code>&lt;TopNavStart&gt;</Code></td>
236
+ <td>
237
+ <Code>AppSwitcher</Code>, <Code>AppSwitcherNav4</Code>
238
+ </td>
239
+ <td>
240
+ <Link href="/components/navigation-system/top-nav-items/code#appswitcher">AppSwitcher</Link>{' '}
241
+ inside <Code>&lt;TopNavStart&gt;</Code>
242
+ </td>
165
243
  </tr>
166
244
  </tbody>
167
245
  </table>
@@ -170,8 +248,8 @@ home and app switcher, previously also in this area, now live in `TopNavStart`.
170
248
 
171
249
  <table>
172
250
  <colgroup>
173
- <col style={{width: '40%'}} />
174
- <col style={{width: '60%'}} />
251
+ <col style={{ width: '40%' }} />
252
+ <col style={{ width: '60%' }} />
175
253
  </colgroup>
176
254
  <thead>
177
255
  <tr>
@@ -181,48 +259,93 @@ home and app switcher, previously also in this area, now live in `TopNavStart`.
181
259
  </thead>
182
260
  <tbody>
183
261
  <tr>
184
- <td><Code>Search</Code></td>
185
- <td><Link href="/components/navigation-system/top-nav-items/code#search">Search</Link> inside <Code>&lt;TopNavMiddle&gt;</Code></td>
186
- </tr>
187
- <tr>
188
- <td><Code>Create</Code></td>
189
- <td><Link href="/components/navigation-system/top-nav-items/code#createbutton">CreateButton</Link> inside <Code>&lt;TopNavMiddle&gt;</Code></td>
190
- </tr>
191
- <tr>
192
- <td><Code>Help</Code></td>
193
- <td><Link href="/components/navigation-system/top-nav-items/code#help">Help</Link> inside <Code>&lt;TopNavEnd&gt;</Code></td>
194
- </tr>
195
- <tr>
196
- <td><Code>Notifications</Code></td>
197
- <td><Link href="/components/navigation-system/top-nav-items/code#notifications">Notifications</Link> inside <Code>&lt;TopNavEnd&gt;</Code></td>
198
- </tr>
199
- <tr>
200
- <td><Code>Settings</Code></td>
201
- <td><Link href="/components/navigation-system/top-nav-items/code#settings">Settings</Link> inside <Code>&lt;TopNavEnd&gt;</Code></td>
202
- </tr>
203
- <tr>
204
- <td><Code>Profile</Code></td>
205
- <td><Link href="/components/navigation-system/top-nav-items/code#profile">Profile</Link> inside <Code>&lt;TopNavEnd&gt;</Code></td>
206
- </tr>
207
- <tr>
208
- <td><Code>IconButton</Code></td>
209
- <td><Link href="/components/navigation-system/top-nav-items/code#enditem">EndItem</Link> inside <Code>&lt;TopNavEnd&gt;</Code></td>
210
- </tr>
211
- <tr>
212
- <td><Code>SignIn</Code></td>
213
- <td><Link href="/components/navigation-system/top-nav-items/code#login">LogIn</Link> inside <Code>&lt;TopNavEnd&gt;</Code></td>
262
+ <td>
263
+ <Code>Search</Code>
264
+ </td>
265
+ <td>
266
+ <Link href="/components/navigation-system/top-nav-items/code#search">Search</Link> inside{' '}
267
+ <Code>&lt;TopNavMiddle&gt;</Code>
268
+ </td>
269
+ </tr>
270
+ <tr>
271
+ <td>
272
+ <Code>Create</Code>
273
+ </td>
274
+ <td>
275
+ <Link href="/components/navigation-system/top-nav-items/code#createbutton">
276
+ CreateButton
277
+ </Link>{' '}
278
+ inside <Code>&lt;TopNavMiddle&gt;</Code>
279
+ </td>
280
+ </tr>
281
+ <tr>
282
+ <td>
283
+ <Code>Help</Code>
284
+ </td>
285
+ <td>
286
+ <Link href="/components/navigation-system/top-nav-items/code#help">Help</Link> inside{' '}
287
+ <Code>&lt;TopNavEnd&gt;</Code>
288
+ </td>
289
+ </tr>
290
+ <tr>
291
+ <td>
292
+ <Code>Notifications</Code>
293
+ </td>
294
+ <td>
295
+ <Link href="/components/navigation-system/top-nav-items/code#notifications">
296
+ Notifications
297
+ </Link>{' '}
298
+ inside <Code>&lt;TopNavEnd&gt;</Code>
299
+ </td>
300
+ </tr>
301
+ <tr>
302
+ <td>
303
+ <Code>Settings</Code>
304
+ </td>
305
+ <td>
306
+ <Link href="/components/navigation-system/top-nav-items/code#settings">Settings</Link>{' '}
307
+ inside <Code>&lt;TopNavEnd&gt;</Code>
308
+ </td>
309
+ </tr>
310
+ <tr>
311
+ <td>
312
+ <Code>Profile</Code>
313
+ </td>
314
+ <td>
315
+ <Link href="/components/navigation-system/top-nav-items/code#profile">Profile</Link> inside{' '}
316
+ <Code>&lt;TopNavEnd&gt;</Code>
317
+ </td>
318
+ </tr>
319
+ <tr>
320
+ <td>
321
+ <Code>IconButton</Code>
322
+ </td>
323
+ <td>
324
+ <Link href="/components/navigation-system/top-nav-items/code#enditem">EndItem</Link> inside{' '}
325
+ <Code>&lt;TopNavEnd&gt;</Code>
326
+ </td>
327
+ </tr>
328
+ <tr>
329
+ <td>
330
+ <Code>SignIn</Code>
331
+ </td>
332
+ <td>
333
+ <Link href="/components/navigation-system/top-nav-items/code#login">LogIn</Link> inside{' '}
334
+ <Code>&lt;TopNavEnd&gt;</Code>
335
+ </td>
214
336
  </tr>
215
337
  </tbody>
216
338
  </table>
217
339
 
218
340
  ### Custom theming
219
341
 
220
- Legacy custom theming is supported with a new API. See [custom theming](/components/navigation-system/layout/custom-theming) for details.
342
+ Legacy custom theming is supported with a new API. See
343
+ [custom theming](/components/navigation-system/layout/custom-theming) for details.
221
344
 
222
345
  ### Loading states
223
346
 
224
- The skeleton loading components (`NavigationSkeleton`, `SkeletonCreateButton`, `SkeletonIconButton`, `SkeletonPrimaryButton`, `SkeletonSwitcherButton`) have no equivalent in the new navigation system.
225
-
347
+ The skeleton loading components (`NavigationSkeleton`, `SkeletonCreateButton`, `SkeletonIconButton`,
348
+ `SkeletonPrimaryButton`, `SkeletonSwitcherButton`) have no equivalent in the new navigation system.
226
349
 
227
350
  ## Side navigation
228
351
 
@@ -230,14 +353,15 @@ Side nav is for app-specific navigation — use it to navigate within an app, be
230
353
  projects, boards, spaces, and so on. The side nav is resizable, collapsible, and supports user
231
354
  customisation of menu items.
232
355
 
233
- Side nav items are in the separate [side nav items](https://atlaskit.atlassian.com/packages/navigation/side-nav-items) package.
356
+ Side nav items are in the separate
357
+ [side nav items](https://atlaskit.atlassian.com/packages/navigation/side-nav-items) package.
234
358
 
235
359
  ### Layout
236
360
 
237
361
  <table>
238
362
  <colgroup>
239
- <col style={{width: '40%'}} />
240
- <col style={{width: '60%'}} />
363
+ <col style={{ width: '40%' }} />
364
+ <col style={{ width: '60%' }} />
241
365
  </colgroup>
242
366
  <thead>
243
367
  <tr>
@@ -247,28 +371,56 @@ Side nav items are in the separate [side nav items](https://atlaskit.atlassian.c
247
371
  </thead>
248
372
  <tbody>
249
373
  <tr>
250
- <td><Code>SideNavigation</Code></td>
251
- <td><Link href="/components/navigation-system/layout/code#sidenav">SideNav</Link></td>
252
- </tr>
253
- <tr>
254
- <td><Code>NavigationContent</Code></td>
255
- <td><Link href="/components/navigation-system/layout/code#sidenavbody">SideNavBody</Link></td>
256
- </tr>
257
- <tr>
258
- <td><Code>NavigationHeader</Code></td>
259
- <td><Link href="/components/navigation-system/layout/code#sidenavheader">SideNavHeader</Link></td>
260
- </tr>
261
- <tr>
262
- <td><Code>Header</Code></td>
263
- <td>No equivalent. There is no opinionated presentation component for the header slot — build your own content inside <Link href="/components/navigation-system/layout/code#sidenavheader">SideNavHeader</Link>.</td>
264
- </tr>
265
- <tr>
266
- <td><Code>NavigationFooter</Code></td>
267
- <td><Link href="/components/navigation-system/layout/code#sidenavfooter">SideNavFooter</Link></td>
268
- </tr>
269
- <tr>
270
- <td><Code>Footer</Code></td>
271
- <td>No equivalent. There is no opinionated presentation component for the footer slot — build your own content inside <Link href="/components/navigation-system/layout/code#sidenavfooter">SideNavFooter</Link>.</td>
374
+ <td>
375
+ <Code>SideNavigation</Code>
376
+ </td>
377
+ <td>
378
+ <Link href="/components/navigation-system/layout/code#sidenav">SideNav</Link>
379
+ </td>
380
+ </tr>
381
+ <tr>
382
+ <td>
383
+ <Code>NavigationContent</Code>
384
+ </td>
385
+ <td>
386
+ <Link href="/components/navigation-system/layout/code#sidenavbody">SideNavBody</Link>
387
+ </td>
388
+ </tr>
389
+ <tr>
390
+ <td>
391
+ <Code>NavigationHeader</Code>
392
+ </td>
393
+ <td>
394
+ <Link href="/components/navigation-system/layout/code#sidenavheader">SideNavHeader</Link>
395
+ </td>
396
+ </tr>
397
+ <tr>
398
+ <td>
399
+ <Code>Header</Code>
400
+ </td>
401
+ <td>
402
+ No equivalent. There is no opinionated presentation component for the header slot — build
403
+ your own content inside{' '}
404
+ <Link href="/components/navigation-system/layout/code#sidenavheader">SideNavHeader</Link>.
405
+ </td>
406
+ </tr>
407
+ <tr>
408
+ <td>
409
+ <Code>NavigationFooter</Code>
410
+ </td>
411
+ <td>
412
+ <Link href="/components/navigation-system/layout/code#sidenavfooter">SideNavFooter</Link>
413
+ </td>
414
+ </tr>
415
+ <tr>
416
+ <td>
417
+ <Code>Footer</Code>
418
+ </td>
419
+ <td>
420
+ No equivalent. There is no opinionated presentation component for the footer slot — build
421
+ your own content inside{' '}
422
+ <Link href="/components/navigation-system/layout/code#sidenavfooter">SideNavFooter</Link>.
423
+ </td>
272
424
  </tr>
273
425
  </tbody>
274
426
  </table>
@@ -277,8 +429,8 @@ Side nav items are in the separate [side nav items](https://atlaskit.atlassian.c
277
429
 
278
430
  <table>
279
431
  <colgroup>
280
- <col style={{width: '40%'}} />
281
- <col style={{width: '60%'}} />
432
+ <col style={{ width: '40%' }} />
433
+ <col style={{ width: '60%' }} />
282
434
  </colgroup>
283
435
  <thead>
284
436
  <tr>
@@ -288,28 +440,64 @@ Side nav items are in the separate [side nav items](https://atlaskit.atlassian.c
288
440
  </thead>
289
441
  <tbody>
290
442
  <tr>
291
- <td><Code>LinkItem</Code></td>
292
- <td><Link href="https://atlaskit.atlassian.com/packages/navigation/side-nav-items#link-menu-item">LinkMenuItem</Link></td>
293
- </tr>
294
- <tr>
295
- <td><Code>ButtonItem</Code></td>
296
- <td><Link href="https://atlaskit.atlassian.com/packages/navigation/side-nav-items#button-menu-item">ButtonMenuItem</Link></td>
297
- </tr>
298
- <tr>
299
- <td><Code>CustomItem</Code></td>
300
- <td>No equivalent. Use <Code>ButtonMenuItem</Code> or <Code>LinkMenuItem</Code> with custom content.</td>
301
- </tr>
302
- <tr>
303
- <td><Code>Section</Code></td>
304
- <td><Link href="https://atlaskit.atlassian.com/packages/navigation/side-nav-items#menu-section-and-menu-section-heading">MenuSection</Link></td>
305
- </tr>
306
- <tr>
307
- <td><Code>HeadingItem</Code></td>
308
- <td><Link href="https://atlaskit.atlassian.com/packages/navigation/side-nav-items#menu-section-and-menu-section-heading">MenuSectionHeading</Link></td>
309
- </tr>
310
- <tr>
311
- <td><Code>SkeletonItem</Code>, <Code>SkeletonHeadingItem</Code>, <Code>LoadingItems</Code></td>
312
- <td>See <Link href="https://atlaskit.atlassian.com/packages/navigation/side-nav-items#loading-states">loading states</Link></td>
443
+ <td>
444
+ <Code>LinkItem</Code>
445
+ </td>
446
+ <td>
447
+ <Link href="https://atlaskit.atlassian.com/packages/navigation/side-nav-items#link-menu-item">
448
+ LinkMenuItem
449
+ </Link>
450
+ </td>
451
+ </tr>
452
+ <tr>
453
+ <td>
454
+ <Code>ButtonItem</Code>
455
+ </td>
456
+ <td>
457
+ <Link href="https://atlaskit.atlassian.com/packages/navigation/side-nav-items#button-menu-item">
458
+ ButtonMenuItem
459
+ </Link>
460
+ </td>
461
+ </tr>
462
+ <tr>
463
+ <td>
464
+ <Code>CustomItem</Code>
465
+ </td>
466
+ <td>
467
+ No equivalent. Use <Code>ButtonMenuItem</Code> or <Code>LinkMenuItem</Code> with custom
468
+ content.
469
+ </td>
470
+ </tr>
471
+ <tr>
472
+ <td>
473
+ <Code>Section</Code>
474
+ </td>
475
+ <td>
476
+ <Link href="https://atlaskit.atlassian.com/packages/navigation/side-nav-items#menu-section-and-menu-section-heading">
477
+ MenuSection
478
+ </Link>
479
+ </td>
480
+ </tr>
481
+ <tr>
482
+ <td>
483
+ <Code>HeadingItem</Code>
484
+ </td>
485
+ <td>
486
+ <Link href="https://atlaskit.atlassian.com/packages/navigation/side-nav-items#menu-section-and-menu-section-heading">
487
+ MenuSectionHeading
488
+ </Link>
489
+ </td>
490
+ </tr>
491
+ <tr>
492
+ <td>
493
+ <Code>SkeletonItem</Code>, <Code>SkeletonHeadingItem</Code>, <Code>LoadingItems</Code>
494
+ </td>
495
+ <td>
496
+ See{' '}
497
+ <Link href="https://atlaskit.atlassian.com/packages/navigation/side-nav-items#loading-states">
498
+ loading states
499
+ </Link>
500
+ </td>
313
501
  </tr>
314
502
  </tbody>
315
503
  </table>