Override or Extend Core Admin UI Component (navigation-bookmark.vue)?

Help
,
1

Hey everyone,

Quick question — I’m trying to customize the appearance of the bookmarks in the admin UI. Specifically, I want to conditionally add a class to this line in navigation-bookmark.vue: directus/app/src/modules/content/components/navigation-bookmark.vue at main · directus/directus · GitHub

<v-text-overflow :text="name" />

Ideally, I’d like to change it to:

<v-text-overflow :text="name" :class="{ 'bookmark--global': scope === 'global' }" />

But I’d prefer not to modify the core source code directly.
Is there any supported way to override or extend this component via an extension, interface, or module?

Would appreciate any tips or direction.

2

Currently, there’s no way to override core components without updating the source code directly.

The only other options you could try are:

  • DOM manipulation inside extensions - Use JavaScript to modify the rendered elements after they load
  • Custom CSS - Override styles to hide/show/modify the appearance of existing elements

Neither of these approaches are ideal since they’re brittle and could break with updates, but they might work as temporary workarounds depending on what you’re trying to achieve.

Why are you trying to change this?