How to add a custom element next to a specific existing navbar element?

[jkrumbiegel]

Is your feature request related to a problem? Please describe.

On our page, we have this navbar section currently:

I want to have a version selector between Resources and the dark/light toggle preferably. The existing slots nav-bar-title-before, nav-bar-title-after, nav-bar-content-before, nav-bar-content-after can only put elements outside of the navbar flow or at the least not at the position I'd like. I have not found a way yet to splice components into specific places in the layout.

The version picker can only be populated at load time because it has to read a javascript file from the server, so I can't just add it as a normal menu, although I want it to look like one.

Describe the solution you'd like

Ideally I'd want some way to access the navbar elements like an array, putting a custom component into it in a position I decide, without having to clone and modify the complete theme.

Describe alternatives you've considered

I've only found issues where people wanted to replace the elements in the navbar with their own implementations completely, not one where you'd be able to place additional elements.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

Not a stable option, but you can patch VPNavBar.vue using a vite alias / plugin or pnpm patch / patch-package to add an extra component after VPNavBarMenu.

[userquin]

Not easy, maybe we can add a few more slots (then we'll have some problems with styles): check this PR to add just a new switcher unocss/unocss#3931