Nesting Navigator Nodes

Forum
1

As a follow-up to my last post on the navigator panel, is there a way to nest multiple navigator nodes within a single one?

What I mean is that I would like to have one tab bound to a parent component act as a dropdown for other subcomponents, so that it would look something like this:

image
image249×355 5.17 KB

2

Hi @luclib,

You can have the NavigatorNodes loosely coupled by just mentioning the parent NavigatorNode label in the parent attribute:

    hookNavigator(
      new NavigatorNode({
        label: 'Data grid examples',
        icon: 'table',
        priority: 30
      })
    )
    [...]
    hookNavigator(
      new NavigatorNode({
        priority: 20,
        path: 'grids/server-grid-example',
        icon: 'table',
        label: 'Server grid',
        parent: 'Data grid examples'
      })
    )

This sample is taken from the tutorial application.

Another option would be to directly couple them:

const serverGridNode = new NavigatorNode({
  priority: 20,
  path: 'grids/server-grid-example',
  icon: 'table',
  label: 'Server grid'
});
const dataGridNode = new NavigatorNode({
  label: 'Data grid examples',
  icon: 'table',
  priority: 30
});
dataGridNode.add(serverGridNode);
[...]
hookNavigator(dataGridNode)

Regards,
Tristan