UIShell: HeaderNavItem list extends beyond Header length

[IIIMattiasIII]

I'll preface this by noting I'm still relatively new to Carbon Svelte, so I may be missing something, and so have started this discussion rather than an issue.

The 'issue' is that with a large number of NavItems, they can extend beyond the length of the Header, making the end items inaccessible and likewise any Utilities or Actions.

This can be replicated by duplicating line 39 multiple times in this REPL (ie. adding more HeaderNavItems) and then adjusting the size of the preview window.

What I would expect is that the items are hidden when below a given media size (this seems to be 1056px/66rem presently and working as intended) but also the items should be hidden if their combined length exceeds the length of the header itself. That is to say, if the HeaderNav has a width of, say, 78rem, the media rule with "display:block" should be "min-width:78rem" not "66rem".

From what I can see, the default expansionBreakpoint size seems to also be 1056px (coniciding with the point where the NavItems will disappear to the SideNav/hamburger menu); however, changing these values does not seem to resolve the issue.

Have I missed a property or rule somewhere that can correct this behaviour? Or is this a potential issue?

[theetrain]

Hi @IIIMattiasIII

I think you've brought up a valid shortcoming with UIShell. The expansionBreakpoint seems to only impact the visibility of <SideNav>, but not the visibility of Header nav items.

I believe most of these issues could be resolved in #1674 but I don't have a timeline for when. You may be able to control visibility in the interim with a custom wrapper or CSS override targeting the .bx--header__nav class.