Custom Menu

The widget arcCustomMenu is a flexible menu system that allows you to display navigation elements, filters, or toggle options directly on your interface. It's ideal for switching between views, setting data fields, or triggering popups – all without complex UI building in Ninox.

The menu can be visually customized to suit your design: colors, font sizes, icons, active states, and hover effects are freely configurable. Buttons can also carry badges and be assigned different actions (update, popup, delete).

💡 The widget can be embedded in existing layouts or presented as its own component – depending on the use case.

🔧 Structure of the arcCustomMenu Widget

The arcCustomMenu consists of a central configuration object with the following areas:

1. General Settings

   Directly at the top level (uniqueId, embedded, hoverActions)

2. Menu Configuration (menu[…])

   Controls the layout of the menu bar – e.g., positioning, font size, and colors for normal and active states

3. Menu Items (menu[…].menuItems[…])

   Individual buttons with title, icon, active state, and actions (e.g., change field value, open popup)

let current := this;
arcCustomMenu({
		uniqueId: "menu " + Nr,
		embedded: false,
        borderRadius: "4px",
		hoverActions: {
			backgroundColor: "#192e65",
			fontColor: "#fff",
			borderColor: "#192e65",
			iconColor: "#fff",
			animation: "0.2s"
		},
		menu: [{
				tableId: tableId(current),
				embedded: false,
				settings: {
					menuBar: {
						width: "",
						position: "",
						backgroundColor: "",
						borderColor: "",
						fontSize: "20px"
					},
					stateNormal: {
						backgroundColor: "",
						borderColor: "",
						fontColor: ""
					},
					stateActive: {
						backgroundColor: "",
						borderColor: "",
						fontColor: ""
					}
				}
			}, {
				menuItems: [{
						item: 1,
						title: "Table",
						active: Menu = text("A"),
						icon: arcCustomIcon({
								name: "table"
							}),
						actions: [{
								recordId: Nr,
								type: "update",
								field: "K",
								value: "A"
							}]
					}, {
						item: 2,
						title: "Kanban",
						active: Menu = text("B"),
						icon: arcCustomIcon({
								name: "kanban"
							}),
						actions: [{
								recordId: Nr,
								type: "update",
								field: "K",
								value: "B"
							}]
					}, {
						item: 3,
						title: "KPI Bar",
						active: Menu = text("C"),
						icon: arcCustomIcon({
								name: "copy"
							}),
						actions: [{
								recordId: Nr,
								type: "update",
								field: "K",
								value: "C"
							}]
					}]
			}]
	})

General Parameter Settings

uniqueId

Type: text
Required: yes

Defines a unique ID for each menu instance. This ID is used internally for targeted CSS addressing and is necessary for multiple menus on the same page to function independently.

💡 Tip: Set the ID dynamically, e.g., with uniqueId: "menu-" + Nr, when you use the widget multiple times.

embedded

Type: boolean
Default: false

Determines whether the widget is embedded in an existing widget (e.g., Layout) or integrated as a standalone widget on the Ninox interface.

💡 Note: If you set embedded: true, you must ensure that the surrounding element provides a suitable height and possibly its own layout. The widget will then fully adapt to this frame.

embedded: false,
embedded: true,

hoverActions

Type: object
Default: no hover behavior

Defines the behavior when hovering over a menu item with the mouse.

You can set specific colors and animations here to be applied during the hover effect. All fields are optional – if you do not specify anything, the default design remains.

💡 Tip: Hover effects significantly improve user guidance – they provide visual feedback and indicate that an element is interactive. Even a single value like backgroundColor is enough to make this feedback noticeable.

borderRadius

Type: text
Default: no radius (sharp corners)

Defines the corner radius of the menu buttons. With this value, you can make the buttons rounded – from slightly soft corners to pill-shaped.

Typical values:

• "4px" for slightly rounded

• "12px" for clearly rounded

• "50%" for circular buttons

💡 Tip: A small borderRadius often gives a more modern, friendlier appearance – especially in combination with hover colors.

  borderRadius: "4px", // Pixelwerte in ""

Menu Settings (menu[…])

In this block, you control the layout and design of the menu bar – i.e., alignment, size, and colors. It is part of the first element in the menu array:

		menu: [{
				tableId: tableId(current),
				settings: {
					menuBar: {
						width: "",
						position: "",
						backgroundColor: "",
						borderColor: "",
						fontSize: "20px"
					},
					stateNormal: {
						backgroundColor: "",
						borderColor: "",
						fontColor: ""
					},
					stateActive: {
						backgroundColor: "",
						borderColor: "",
						fontColor: ""
					}
				}
			}, {
				menuItems: [...]
			}]

tableId

Type: text
Required: yes

Defines the table to which actions within the menu refer. Even though the tableId value is not currently processed directly, it is part of the expected data structure and should always be set.

settings block

Type: object
Required: yes

Contains the visual settings for the menu bar and the display of the buttons – in both normal and active states.

The settings block consists of three sub-objects:

• menuBar → Layout & alignment of the bar

• stateNormal → Design of inactive buttons

• stateActive → Design of active buttons

💡 Tip: If you leave values empty, sensible default values will automatically apply – so you can configure the menu minimally and it still looks good.

settings: {
					menuBar: {
						width: "", // Pixel-Werte o. Prozent-Werte in ""
						position: "", // left, center, right
						backgroundColor: "", // HEX-Wert in ""
						borderColor: "", // HEX-Wert in ""
						fontSize: "100px" // Pixel-Wert in ""
					},
                    stateNormal: {
						backgroundColor: "", // HEX-Wert in "" | definiert die Hintergrundfarbe deines Buttons im unangeklickten Modus.
						borderColor: "", // HEX-Wert in "" | definiert die Rahmengrundfarbe deines Buttons im unangeklickten Modus.
						fontColor: "" // HEX-Wert in "" | definiert die Schriftfarbe deines Buttons im unangeklickten Modus.
					},
					stateActive: {
						backgroundColor: "", // HEX-Wert in "" | definiert die Hintergrundfarbe deines Buttons im angeklickten Modus.
						borderColor: "", // HEX-Wert in "" | definiert die Rahmengrundfarbe deines Buttons im angeklickten Modus.
						fontColor: "" // HEX-Wert in "" | definiert die Schriftfarbe deines Buttons im angeklickten Modus.
					}
				}
			}

menuItems[]

The second part of the menu array contains the actual menu entries. Each menu item is defined as an object in the menuItems list. A menu entry usually consists of a title, an icon, an active state, and one or more actions to be executed.

menuItems: [{
						item: 1,
						field: "menuText",
						title: "Übersicht",
						activeState: if menuText = text("U") then "active" else "" end,
						iconName: "info",
						actions: [{
								recordId: Nr,
								type: "update",
								field: "B",
								value: "U"
							}]
					}

item

This value is a running number that is used internally for sorting or identifying menu entries.

Type: number
Required: yes

item: 1, // Zahlenwert. Beschrifte hier deine Menüpunkte einfach nach Anzahl. 

title

Here you set the text that will be displayed on the button. The title is visible to users and should clearly indicate the function of the button.

Type: text
Required: yes

title: "Übersicht",

activeState defines when your menu item should be active. In this example: when the text "A" is in the text field menuText, then the button should be active.

activeState: if menuText = text("A") then "active" else "" end,

icon

With the icon field, you can add an icon to your button. Icons are typically defined via arcCustomIcon({ name: "..." }). If no icon is specified, the button will consist only of text.

Type: function
Required: no

icon: "", // Kein Icon wird angezeigt
icon: arcCustomIcon({
		name: "kanban" }), // Benutze das Widget arcCiustomIcon()

active

The active field determines whether a menu item is currently marked as active. Usually, this is an expression that compares the current state – e.g., Menu = "A" or Menu=1. Active menu items are visually highlighted (e.g., with a different background color) and help users recognize which area is currently selected.

Type: boolean or expression
Required: yes

active: Menu = "B",

actions

In actions, you define what should happen when the button is clicked. You can define one or more actions here. Each action entry is an object with a type and possibly additional parameters like recordId, field, or value.

Type: array
Required: yes

💡 Note: Each action is executed in the order in which it appears in the array. You can combine multiple actions – for example, set a field value first and then open a popup.

Possible Actions

Action: update

actions: [{
				recordId: Nr,
				type: "update", // update aktualisiert/manipuliert ein Feld. 
				field: "B", // Feld Id des zu manipulierenden Feldes.
				value: "A" // Wert, der in das Feld geschrieben werden soll. In dem Beispiel: wird "A" in ein Textfeld geschrieben.
			}]

Action: popup

actions: [{
                recordId: Nr,
                type: "popup", // popup öffnet den Record
            }]

Action: delete

actions: [{
                recordId: Nr,
                type: "delete", // delete löscht den Record
            }]

Conclusion ✅

With arcCustomMenu, you can create flexible menu bars in your Ninox interface – ideal for toggling views, setting field values, or opening popups.

The widget can be fully adapted to your design: from colors and fonts to hover and active states.

Let’s build smarter interfaces – with arcWidgets.

Questions or feedback? → office@arc-rider.com