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
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:
- Vanilla navigation: https://docs.vanillaframework.io/patterns/navigation/
- Vanilla accordion: https://docs.vanillaframework.io/patterns/accordion/
How it works
No selection:
Mouseover:
Click, current:
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.
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
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!