How to add a new button inside quick-access-profile?

AI-generated summary

In a Dev category discussion titled “How to add a new button inside quick-access-profile?”, Decrypt asked if it’s possible to insert a new link between “Preferences” and “Notifications” in the quick-access profile dropdown, either via theme edits or a plugin. Arkshine responded by pointing to the addQuickAccessProfileItem API function in Discourse’s source code, providing a code example that adds a new item labeled “Test” with a pencil icon and custom href. The new item will appear before the logout button by default. To position it between “Preferences” and “Notifications”, Arkshine suggested using CSS to reorder the menu items by assigning explicit order values to each class, noting that while not ideal, it’s currently the best available workaround. Decrypt thanked the responder for the helpful guidance. The discussion includes screenshots illustrating the UI and the resulting menu layout after applying the changes.

Hello !

Is it possible to add a new link on this section :

It would be between “preference” and “notifications”. By either editing my theme or adding a new plugin.

Thank you !

Hello! Welcome back. :slight_smile:

You have an API function addQuickAccessProfileItem where it can insert an item before the logout button.

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs#L1893-L1907

For example:

<script type="text/discourse-plugin" version="0.8">
api.addQuickAccessProfileItem({
  icon: "pencil-alt",
  href: "/somewhere",
  content: "Test"
})
</script>

Then you can use CSS to reorder the items (that not ideal, but not much choice)

.user-menu {
    .summary { order: 1 }
    .activity { order: 2 }
    .invites { order: 3 }
    .drafts { order: 4 }
    .preferences { order: 5 }
    
    /* yours here */
    .test { order: 6 }
    
    .do-not-disturb { order: 7 }
    .logout { order: 8 }
}

Hope that helps. :+1:

Thank you very much !