Hide route from navbar?

[vexilar]

I'm wanting to have routes for /customer/[:id] for create/edit to be able to router.push to them and have them show up in the breadcrumbs in pagelayout, but NOT have them show up in the navigation bar. Is there a way to achieve this?

[Janpot]

Note that you can supply your own title and breadcrumbs to the PageContainer

<PageContainer
  title="ACME ltd."
  breadCrumbs={[
    { path: '/customer', title: 'Customers' },
    { path: '/customer/12345', title: '12345' },
  ]}
>
  Page content
</PageContainer>

This way you can use it on pages that are not matched by any navigation from the AppProvider.

---

We're renaming the breadCrumbs prop to breadcrumbs in 0.8.0.

[Janpot]

That'll also be fixed as part of 0.8.0

[vexilar]

Nice. Thanks for your help

[Janpot]

Ok, just to note that we didn't really see this as a workaround, but rather intended usage. It's a simple and versatile API. Always happy to hear ideas about alternatives.

[aress31]

A more effective approach would be to include a hidden property in the navigation structure, as shown below:

{
  segment: "projects",
  icon: <Folder />,
  title: "Projects",
  // children: [
  //   { segment: `${projectId}/foo` },
  //   { segment: `${projectId}/bar` },
  // ],
}

This eliminates the need to modify the breadcrumb integration within the DashboardLayout component.

Additionally, implementing index routes that are neither routable nor displayed can help maintain the hierarchical structure of the navigation. You could introduce a property like index for this purpose.

[Janpot]

I think we'd probably like to avoid encoding information in this navigation structure that applies to only a single one of the (maybe) rendered descendant components (i.e. DashboardLayout). I feel like it makes more sense to move that behavior into the DashboardLayout component itself. For example through a isNavigationItemVisible callback prop that is called for each item. This would make it similar to how the X tree view isItemDisabled prop works.