-
Notifications
You must be signed in to change notification settings - Fork 272
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add side nav tree #1363
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Summary
This is an extension of #1362 that should be completed together.
The current side nav is limited by one level of nesting. This has resulted in a cluttered side nav, and an overly aggressive use of page tabs.
The Carbon core team built an entirely new way to do this in Carbon Platform by taking the (now stable)
TreeView
component (part of Carbon v11):https://react.carbondesignsystem.com/?path=/docs/components-treeview--overview
And then theming and customizing it to work as a side nav with multiple levels of nesting. The Carbon Platform doesn't have an example of level two nesting, but here's an example from the design spec:
Justification
This will allow much needed UX and IA improvements for the various Carbon local system (PAL) websites that are build with the Carbon Gatsby Theme.
Desired UX and success metrics
Match the coded
TreeNav
component used in Carbon Platform: https://next.carbondesignsystem.comHere's the design spec used to build Carbon Platform, in case a bug is identified in Carbon Platform: https://www.figma.com/file/UkKF0SLT3qUmGoXQFVKtXT/RL_Library_Navigation?type=design&node-id=0-1&mode=design&t=unaj7OSZxa6uc7Zp-0
Must-have functionality
This is the current nav data model:
I'm thinking we'd want to support a second level of links with a YAML structure like:
Like the side nav heading issue, any changes to the nav data should included updated documentation.
Both of these issues would needed to be completed without breaking changes. Because these enhancements only add to the nav data model, that should be possible.
Development considerations
Here is the Carbon Platform source for
NavTree
that could be lifted and shifted. Because the nav data model is different, this requires more than a copy paste job. The styling overrides could be used directly, but the logic to parse the nav data will have to be different.https://github.com/carbon-design-system/carbon-platform/tree/main/services/web-app/components/nav-tree
Because the latest version of the Gatsby theme uses Carbon v11, this should be possible without having to update any Carbon versions.
Specific timeline issues / requests
N/A
Available extra resources
@glapadre might consider contributing this enhancement.
The text was updated successfully, but these errors were encountered: