[discussion]: Tertiary navigation options

[vpicone]

We're looking for teams and site's that would benefit from tertiary level navigation. A tertiary level of navigation would mean a layer beyond the top level menu items (primary), and sub-menu items (secondary).

Tabs are already available as a form of tertiary navigation. However, they're not super discoverable and can result in a confusing information architecture.

Some options we thought were interesting are

1. Polaris, who divide their content up by a top level category. This results in a more consistent top-down/inverted implementation of Tabs. Other examples of this pattern include:
   • Google's material design system
   • Microsoft's Fabric design system
   • ant.design
2. Atlassian Design – this options results in switching out the left nav entirely. Other instances of the left nav are accessible through a dropdown menu.

[theiliad]

I’ll add a bit more context to the problem statement here, and @jeanservaas might chime in as well.

Currently within the Carbon website for instance you’ve got 4-5 key sections to the IA at the highest level (tutorials, patterns, guidelines, demos etc…)

Now within the Data Visualization nav item you’ve got the same architecture setup, however there are no distinguishing elements to differentiate the sub nav items in there. We’ve discussed this in depth with @jeanservaas, @sadekbazaraa and @mjabbink and I believe it’s pretty clear that tabs won’t be the ideal option. I’m open to continue exploring other alternatives however tertiary navigation seems to be the most viable solution currently

[vpicone]

@theiliad My initial thought is that If Data Vis requires an AI equally as complex as Carbon, then it might be better served on its own site. Doubling down on the complexity by increasing nav depth seems like a cop out.

With a third level we would have:

1. Top level
2. top level tab
3. Second level
4. second level tab
5. third level
6. third level tab

In some propositions (Brand), you get a whole new nav bar. This means EIGHT layers when you consider tabbed pages.

Getting people to organize their data effectively with 6-8 possible IA layers is a big ask.

[theiliad]

In my perspective the IA value of tabs is not equal to sidenav elements.

Tabs aren't the most ideal way to handle navigation of your content and rather offer a way to hide & show various smaller pieces within 1 page (e.g. tabs should be used within a single page rather than offering a way to navigate through different pages)

Therefore I personally wouldn't consider tabs as a navigational layer.

I believe @sadekbazaraa has gone through multiple explorations and iterations of IA within Carbon. Sadek feel free to chime in on any of your findings.

@vpicone I believe you mentioned on Slack that this might be something we could potentially only add to the Carbon website. Not sure of the dynamics there but I'm open to exploring that as well

[tay1orjones]

The example from Polaris would be beneficial for us. Our site is emerging into two primary use cases:

1. PAL Documentation (design and dev) - effectively the same use case as the Carbon website.
2. An information hub for the internal product design teams. Things like
   • Designer onboarding info
   • Product team contacts/roles/etc
   • Design Research process documentation
   • ...basically things you'd typically find previously in a connections wiki or similar

It would be incredibly helpful to separate these two at the topmost level while retaining the existing levels of navigation (left nav groups -> tabbed pages -> anchorlinks).

Currently it looks like we'll be aiming to hack a dividing line in our left nav to try and separate these which is far from ideal. The screens below aren't an exact representation, but you get the drift:	existing	with new dividing line

@vpicone would you accept a PR adding first party support for dividing lines in the left nav declaratively via

- title: $DIVIDER$

or similar in nav-items.yml?

[sadekbazaraa]

@tay1orjones @vpicone I would recommend using the vertical dividers that we're already using when considering this as an option. The same style as what you have above "Storybook".

[tay1orjones]

@sadekbazaraa Yes, that is the planned visual treatment. My screenshot above is a mockup quickly done via dev tools to show the general intention. The specific implementation would have the dividing line with the same treatment as the one above the Storybook link.