UNPKG

@atlaskit/side-navigation

Version:

A highly composable side navigation component that supports nested views.

atlassian.design/components/side-navigation/

47 lines (35 loc) • 2.25 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
--- order: 2 --- ## Usage The side navigation helps people move around within a subsection of an app. For example, navigating through the topics in a Confluence space, or to specific tasks within their Jira project. Use the side navigation with the [page layout component](/components/page-layout/examples) to compose your navigation experience. This ensures that you get access to useful accessibility and customization features by default. ## Accessibility - Keep nested navigation levels to a minimum. If you need to use a nested navigation, always provide a "go back" button to help people get out of the menu. - Provide a unique `label` for every different navigation in the page layout. Make sure that the navigation label is meaningful and not direction-based. For example, "Current project" not "Left navigation". If it's the same navigation repeated in another place on the page layout, use the same `label`. - Don't include the word "navigation" in your `label`. The `<nav>` semantics mean assistive technology will already tell people that they are using a navigation. ## Best practices ### Loading states Sometimes you'll need to load some of the side navigation content asynchronously. There are a few things to keep in mind: - Only use skeletons when you're certain of what the loaded state will look like. Most items that appear in side navigation are probably fine to use with skeletons, for example, `@atlaskit/tree`. - When transitioning from loading skeleton to loaded items, try to ensure the jump doesn't look janky - use the equivalent skeleton item that is appropriate and be careful of things changing size by a few pixels. We should be striving for UI that feels **stable**, which means it doesn't jump around when content loads. - Ensure loading does not take too long - try to anticipate if people will look at your menu via hover events and pre-load the data as soon as possible. - When the content is loading in, make sure it all loads in at the same time - our minds aren't fast enough to distinguish each item loading individually, for example, and it appears slower to most people. ## Related - Use the side navigation with the [page layout component](/components/page-layout/examples).