Expose dynamically setting the topLevelNavbarItems in v4

[Firgrep]

Is your feature request related to a problem? Please describe. In v3, you could alter the navbar items by filtering what was passed to its props, such that you could dynamically change the navbar based on the path (the old turbo.build page used to do this). In v4, the navbar retrieves the items internally through a hook, preventing feeding it the modified list of items.

Describe the solution you'd like A clear and concise description of what you want to happen. Want to be able to modify the navbar items.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered. Not sure what other workarounds are possible here. I want to be able to modify that list since that list also goes into the mobile navbar etc.

Additional context Add any other context or screenshots about the feature request here.

[Firgrep]

Trying to come up with a solution in the referenced PR above. It's not working though, so if anyone can spot the issue or suggest a better way, or if there's a workaround, I'm all ears.

[dimaMachina]

I think I had a similar problem when I did a migration of graphql.org

https://github.com/graphql/graphql.github.io/blob/f7bfbd177f1f7a13109bb370ad401151428444e8/src/globals.css#L78-L82

maybe we can add the possibility to set className in _meta files?

[Firgrep]

Would this also add new links? Not just hide existing ones?

[dimaMachina]

Would this also add new links? Not just hide existing ones?

of course not

the navbar retrieves the items internally through a hook, preventing feeding it the modified list of items.

we cannot pass functions from server components into client components

Not sure what other workarounds are possible here. I want to be able to modify that list since that list also goes into the mobile navbar etc.

show me an example with screenshots of what you want to achieve

[Firgrep]

we cannot pass functions from server components into client components

Yes, I understand that, but the config.tsx in nextra-theme-docs is a client component that uses a zustand store that lives on the client? I'm not familiar with zustand but I reckon there must be a way to manipulate the store (scoped to the relevant field) and expose that in a hook?

show me an example with screenshots of what you want to achieve

I can do better, I can show you a live example, using nextra v3. Based on the URL, the navbar has items added based on route.

Root page:

More specific page (notice Guides and Reference added to the navbar that are based on the route):

You can see it here https://sphil.xyz