Sidebar - Vertical navigation pattern

Patterns Template / draft

Vertical sidebar navigation

Vertical navigation with nested items and optional notifications of statuses and icons.

Status tags

Proposed

Implementation

Existing use:
Vanilla docs: https://docs.vanillaframework.io/
Snapcraft docs: https://snapcraft.io/docs
MAAS, JAAS exploration, Snapcraft publisher dashboard exploration
SSO
54

When or why to use this pattern

This pattern would allow us to define a modular and adaptable vertical navigation that could work and scale to different use cases:

  • Documentation pages
  • Applications
  • Websites, brochure pages
  • Articles and whitepapers
  • Step by step flow layout

Why to use this pattern

We already use this vertical navigation pattern across a number of websites, docs, and web apps. Its use is generally consistent in principle (being a Vanilla component) but over different implementations this pattern got custom elements and interactions and visual changes.
These proposed changes for the pattern took in consideration all the use cases and the requirements of our current implementations and tried to anticipate possible different scenarios.

When not to use this pattern

This pattern should not be used for simple marketing brochure pages, where the content can be organised around the main header navigation or a secondary header navigation or sticky nav.

Variations of pattern available

Alternative patterns to consider for the mentioned use cases are:

How it works

No selection:
53

Mouseover:
00

Click, current:
03

Principles

In order to cover a wide range of use cases, we identified these elements to be included in our pattern:

  • Current location indicator
  • Scalability
  • Maximum number of levels
  • Maximum number of items before considering another pattern
  • Nesting & indenting - same across level or adapting to levels to make best use of space
  • Pin (overlay) vs push / resize adjacent content
  • Responsiveness, how does this should behave in narrow windows (not yet mobile)
  • Truncation and OR text wrapping

Actionable

Open / close system is on mouseover, pin the sidebar panel always open, or have it open by default.
45 00

Flexible

In order to adapt to different use cases (docs, web app, and so on) we defined optional variation of the pattern:

  • Truncated or wrapping: ideally pattern should support both options depending on use case
  • Use icons with items or simple plain text
  • Open/close functionality of the navigation sidebar and responsive behaviour
  • Pin open, when navigation is expanded users can pin it open

06

09

Key Components in vanilla this pattern uses

  • The pattern is deprecated from the current Vanilla docs.

Recommendations

  • To scale up, use this pattern in combination to other ones if the content of the primary level or of the nested levels are too many (e.g. more than 20 per each level of indentation). Secondary navigation header menu and table of content (e.g. in Vanilla docs) can be used to reduce the number of items on each level of the sidebar navigation.

Do:

WIP

Don’t

WIP

This pattern in use - real product examples

At the moment we use different sidebars, an example is in docs.vanillaframework.io

Known issues

  • Needs to be tested in the wild
  • User testing on hierarchy and interactions
  • Mobile version

Wishlist

  • Dark theme!