[Phase 2] Sidebar Requirements

[MelSumner]

The sidebar will be present on content pages, depending on the needs. Using a sidebar on landing pages is discouraged.

The sidebar should be able to assist the user with the navigation of complex content pages. Complex pages might have multi-page text with multiple sections and headings and links to external pages or resources.

For the reasons cited above, the sidebar design needs to consider the following:

Visual hierarchy

• Consider how to create visual separations between the different levels of links.
• Consider how the font sizes and styles indicate the content levels.

Colors

• Consider how the sidebar background impacts the legibility of the content.
• Consider minimum size and contrast when applying colors to the text.
• Consider how the sidebar background and content background are related.

Size

• Consider how the readability is impacted by content density or having too many links at once.
• Consider the case where a title is longer than average (e.g., Deprecations added in upcoming features)

Accessibility

• Consider WAI-ARIA semantics for the table of content navigation.

Responsiveness

• Consider how the sidebar will be accessed on lower resolutions or mobile devices.

Requirements:

• Supports at least 3 levels of content.
• Can be added to any content page without requiring changes to the main content.

Current sidebars:

Actions required:

• Create a sidebar entry on the style guide based on the considerations cited above
• Add examples that support the different sidebars illustrated on this issue

[pichfl]

Here are drafts for variations of the sidebar.

Guides

Sidebar with collapsed sections. The first section should start open. It is possible to nest further, but not recommended. Collapsing is optional, but recommend to ensure people are not overwhelmed when starting out.

The version dropdown should open a native <select>.

Blog

Alternative position for the sidebar on larger screens. Does not influence the position of the sidebar button on narrow screens (see further down).

Docs

Regular sidebar position with section headers, not collapsable (there is no point)

Mobile sidebar

The active position is made visible using a secondary header, which has the name of the active page and the name of the active subpage. The sidebar slides in from the right side and scrolls with everything else on the page as navigating should scroll you up to the top.