How to add a custom item to the toolbar?

[alanmoyano]

I tried looking in the codebase but can't find any reference to the items present in the customize menu. It's my first time trying to contribute to the project so I also don't know the folder structure.

Thanks for any help!

[dosubot[bot]]

Hi @alanmoyano! I'm Dosu and I’m helping the desktop team.

Zen Browser supports a customizable toolbar where users can drag and drop items like History, Print, and Developer tools into the toolbar or overflow menu, managed through a UI customization interface. However, there isn't direct documentation or code references available about how to add a new custom item to this menu or where the relevant logic lives in the codebase.

For projects like this, toolbar items are usually defined as UI components or modules, often found in folders named components, ui, or features. Searching the codebase for keywords like toolbar, customize, or the names of existing toolbar items (e.g., History, Print) can help you locate where these items are registered and rendered. Reviewing how existing items are implemented is a good way to learn how to add your own.

If you're new to the codebase, start from the main UI entry point or app shell, look for code comments, and check for any README files in UI-related folders. Iteratively exploring and experimenting—such as by tracing how a known toolbar item is added—can help you understand the structure and process for adding your own custom item.

For more context on how the toolbar customization works and some of the issues users have encountered, you can check out this discussion and this issue.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[alanmoyano]

@mr-cheffy sorry for pinging. I got a basic idea of what I need to do but don't know how to achieve it. So if you have the chance to review it, it would be really nice. Thanks!

I basically want to create a new button in the toolbar for toggling compact mode, but since Zen doesn't have any 'custom' widget I cannot find any reference of how to create one, and I'm having trouble building the browser in my mac (related issue)

If there's any advice you can give me, I highly appreciate it! Thanks again.

[alanmoyano]

PS: I don't even know how to create a patch file with the changes, I'm sorry for being annoying. First time trying to contribute to this type of project.

[mr-cheffy]

I was thinking of doing this myself for the next release, I was wondering if I could tackle this one if you don't mind

[alanmoyano]

Sure! I'd love that, and will try to learn from your implementation. Thanks!

[mr-cheffy]

@alanmoyano this easy!

I wanted to do it myself because this way is more simpler and doesn't require patches.

[alanmoyano]

@mr-cheffy oh I see! It's really nice and simple as you say, never worked with patches so was confused with the methodology. Also thanks for the feature, always looking forward to the next release of zen!