Register Sidebar Buttons

Sidebar Buttons appear on the left-hand sidebar of the Project UI in Nexo Maker—the same place where users access the Add, Project, Environment, and Expansions views. You can register your own sidebar

Registering a Sidebar Button

Use the postSidebarIcon() function and pass an object with the required configuration. Pass a Modularjs page ID to render your custom page.

Syntax:

api.nexomaker.postSidebarIcon({
  button: "Button Name",        // Display name
  key: "unique-button-key",     // Unique identifier
  icon: base64Icon,             // Base64-encoded image
  route: "/mycustompage",       // Unique route for navigation
  page: "youpageid"
});

For old expansions, the key "component" has been replaced by "page" and it doesn't accept HTML documents anymore. More information about Modularjs

---

Required: Base64 for Icons

Since Expansions are sandboxed and cannot directly reference local files, icons must be sent as Base64 strings. You can convert local or remote images using:

const icon = await api.nexomaker.imgconvert(__dirname + "/assets/icon.png");

---

Example 1: Custom Component Page

const icon = await api.nexomaker.imgconvert(__dirname + "/assets/customIcon.png");

api.nexomaker.postSidebarIcon({
  button: "My Tool",
  key: "my-tool",
  icon: icon,
  route: "/mytool",
  page: "youpageid"
});

This will create a new button in the sidebar. When clicked, it will render your custom HTML page inside the app.

Note: The component field must be a valid HTML string, not a JSX element or React component reference.

---

Summary

Field	Description	Required
button	Display name on the sidebar	✅
key	Unique identifier	✅
icon	Base64-encoded icon image	✅
route	Route to use for internal navigation	✅ (if using component)
component	HTML string to render inside the app	Optional

---

Let me know if you’d like a reusable template for sidebar components or a helper function to simplify registration!