NavigationItem.title is typed `string` but NavigationNavbar renders it as a ReactNode

[miacycle]

Description

NavigationItem.title is declared as string:

type NavigationItem = {
  id: string;
  title: string;
  ...
};

but NavigationNavbar renders it through MUI's ListItemText:

<ListItemText primary={item.title} {...ListItemTextProps} />

and ListItemTextProps['primary'] is React.ReactNode. So a composed title - a label plus a trailing external-link glyph, a <Chip> badge, a count - renders correctly at runtime but does not type-check.

Impact

NavigationNavbar and NavigationItem gained type declarations in v0.21.42 (they were runtime-only before). Consumers that previously shimmed the component as React.ComponentType<any> and are now adopting the real types hit this immediately. In layer5io/meshery-cloud the nav config has a composed "API Docs" title:

title: (
  <span style={{ display: "flex", alignItems: "center", gap: "4px" }}>
    API Docs
    <OpenInNewIcon width="12" height="12" fill={...} />
  </span>
)

which now needs an as unknown as string assertion to compile (layer5io/meshery-cloud#5757). Every consumer with a non-plain-text nav label will need the same escape hatch.

Proposed fix

Widen the declaration to match what the component already accepts:

type NavigationItem = {
  id: string;
  title: React.ReactNode;
  ...
};

This is source-compatible (string is assignable to ReactNode), so no consumer breaks.

[Utkarsh-Mauryaa]

I would like to work on this. Could you please assign it to me? @miacycle