This week I continued to explore Svelte. However, I was distracted by some new ideas. And this is one of the reasons why I started updating my blog again: having something that forces me to finish a project before moving on to the next. So I resisted the temptation to procrastinate (forever): I completed this template. I’m happy because I can easily reuse it in other projects.

As I said last week, my aim is to get a simple method for creating menus in C3. To do this, I created a reusable component with Svelte, inserted it into C3 and created a Construct 3 project to document its APIs


In this post I want to write how to use this template to create a custom menu. The future me will certainly be happy to find these notes.

First I need two files: menu.js and menu.css. I created and compiled these two files with Svelte. They are the code needed to create, manage and customize the menu.


After importing them into Construct I can start setting up the project. The CSS file only needs to be loaded once, at startup:

I insert the reference to menu.js in a file with purpose “Imports for Events”:

import * as svelte from "./menu.js";

A line of code is enough to show the menu:


To hide the menu just write:


In the example file I create several menus using different techniques. Consequently, each time I call the clearMenu() command to delete all the items in the menu itself.


I use the setTitle() command to customize the menu title

menuSvelte.title.setTitle("Main Menu");

Finally I set the template:

menuSvelte.columns.setColumns(["icon", "label", "description"]);

There are 5 “columns” available: icon, label, description, rightIcon, rightImage. Also there is a container, textual, for textual components.

To insert the various elements in the menu, you can use some commands, which partly follow those already in use for arrays.

	label: "Fonts",
	description: "Choose Font Family for the Menu",
	onClick: "g_runtime.callFunction('showFonts')"

The items.push(newItem) command allows you to insert a new item in the menu. Accept an object whose properties trace the columns that will be displayed in the menu.

To these is added the property: onClick. As you can easily understand, it is used to define the function to perform when you click on the element.


I have implemented these commands:

  • push(item: ItemType)
  • unshift(item: ItemType)
  • shift()
  • pop()
  • addItemAtIndex(index: number, item:ItemType)
  • updateItemById(id:string, item:ItemType)
  • updateItemByLabel(label:string, item:ItemType)
  • updateItemByIndex(index: number, item:ItemType)
  • removeItemById(id: string)
  • removeItemByLabel(label: string)
  • removeItemByIndex(index: number)
  • loadItemsFromArray(arrayItems:ItemType[])

Another useful thing is the ability to change the style of many of the menu items. To do this you can use commands similar to this:

menuSvelte.css.changeStyle("menu-width", "360px");

The available commands are:

  1. changeStyle(style: string, value: string)
  2. changeFontTitle(value: string)
  3. changeFontItems(value: string)
  4. changeFontTitleAndItems(title: string, items: string)
  5. themeStandard(theme:string)
  6. loadTheme(customTheme: Styles, standard:string = “Light”)

You use the first 4 to modify only a single aspect of the menu. For things a little more elaborate, however, it is better to use the last two commands.


You use menuSvelte.css.themeStandard(theme) to set one of the default color themes. I can choose from 9 different themes: Dark, Light, Bouron, Gold Miner, Oscar, Herrera Yellow, Herrera Green, Herrera Blue, and Herrera Magenta.

You use menuSvelte.css.loadTheme(customTheme, standard) to load a custom theme from a JSON file. You can use create a theme with a json similar to this:

	"color-primary": "#2e257d",
    "color-background": "#aaa8bd",

    "font-title": "Roboto, sans-serif",
    "font-items": "Roboto, sans-serif",
    "modal-background": "#0f0c45bf",

    "menu-border-radius": "32px 0px 32px 0px",
    "menu-border-style": "solid",
    "menu-border-width": "1px",

    "item-height": "64px",
    "item-icon-size": "48px",
    "item-image-size": "64px"

You can use a custom theme in C3 through a function similar to this:


That’s all. Here are the links related to this project: