Our Documentation left-side navigation is getting a bit long and we have a desire to add more pages and sections which would make it even longer. We also only support one level of nesting (Section > Page) and new content might be better grouped with another level.
With the current design we chose not to made the sections collapsible because we wanted the nav to be easily scannable. This works will for the above-the-fold sections, but the nav is so long now that it requires a lot of scrolling to even see what the sections are.
One way of handling this would be to have section headers be clickable and collapsible, but with some nuance. Not all sections have to be collapsible, we have some space to play with on the headers: (collapsible, not collapsible) x (default open, default closed). We can set the default expanded state depending on the importance of the section. For instance we can keep Introduction, Components, and Templates expanded and default to collapsed for everything else. If we have multi-level nesting, we can also default to expanded for the top-level section and collapsed for sub-sections
▼ INTRODUCTION
What is Lit?
Getting Started
▼ COMPONENTS
Overview
Defining
Rendering
Reactive properties
Styles
Lifecycle
Shadow DOM
Events
Decorators
▼ TEMPLATES
Overview
Expressions
Conditionals
Lists
Built-in directives
Custom directives
▶ COMPOSITION
▼ USE CASES
▶ STANDALONE COMPONENTS
▶ APPLICATIONS
▶ DESIGN SYSTEMS
▶ FRAMEWORK INTEGRATION
▶ TOOLS AND WORKFLOWS
One problem with collapsible sections is keeping the expanded/collapsed state across page navigations. We can remember this state in local storage or session storage, though that state leaks between tabs. It might be the best option. Another is to record state in the URL so that it's local to a tab, but this can effect cachability of the page if the state is in query parameters, or the simplicity of native fragment navigation if it's encoded in fragments.
For cold navigations to URLs within a collapsed section, we must open the section to show the user where they are in the content.
Our Documentation left-side navigation is getting a bit long and we have a desire to add more pages and sections which would make it even longer. We also only support one level of nesting (Section > Page) and new content might be better grouped with another level.
With the current design we chose not to made the sections collapsible because we wanted the nav to be easily scannable. This works will for the above-the-fold sections, but the nav is so long now that it requires a lot of scrolling to even see what the sections are.
One way of handling this would be to have section headers be clickable and collapsible, but with some nuance. Not all sections have to be collapsible, we have some space to play with on the headers: (collapsible, not collapsible) x (default open, default closed). We can set the default expanded state depending on the importance of the section. For instance we can keep Introduction, Components, and Templates expanded and default to collapsed for everything else. If we have multi-level nesting, we can also default to expanded for the top-level section and collapsed for sub-sections
One problem with collapsible sections is keeping the expanded/collapsed state across page navigations. We can remember this state in local storage or session storage, though that state leaks between tabs. It might be the best option. Another is to record state in the URL so that it's local to a tab, but this can effect cachability of the page if the state is in query parameters, or the simplicity of native fragment navigation if it's encoded in fragments.
For cold navigations to URLs within a collapsed section, we must open the section to show the user where they are in the content.