---
title: "Custom Menu"
slug: "custom-menu"
category: "Widgets"
hosts: "ninox"
---
# Custom Menu
## AI Defaults (read first)
- **uniqueId**: Required, `"menu-" + Nr`.
- **tableId**: Required – the table the menu writes to (e.g. `tableId("Dashboard")`).
- **menuItems**: Each item needs `item` (number), `title`, `active` (boolean), `actions`.
- **actions**: Use `type: "update"` with `recordId: Nr`, `field: fieldId(Nr, "Feldname")`.
- **active state**: Set `active: Feldname = "Wert"` to highlight current selection.
- **embedded**: Default `false`, set `true` when nested.
# Custom Menu
Das Widget `arcCustomMenu` ist ein flexibles Menü-System, mit dem du Navigationselemente, Filter oder Umschaltoptionen direkt auf deiner Oberfläche darstellen kannst. Ideal, um zwischen Ansichten zu wechseln, Datenfelder zu setzen oder Popups auszulösen – ganz ohne komplexes UI-Bauen in Ninox.
Das Menü lässt sich optisch komplett an dein Design anpassen: Farben, Schriftgrößen, Icons, aktive Zustände und Hover-Effekte sind frei konfigurierbar. Buttons können zusätzlich Badges tragen und mit verschiedenen Aktionen belegt werden (`update`, `popup`, `delete`).
💡 Das Widget kann **eingebettet** in bestehende Layouts verwendet werden oder als eigene Komponente dargestellt werden – je nach Einsatzszenario.
## 🔧 Struktur des arcCustomMenu-Widgets
Das `arcCustomMenu` besteht aus einem zentralen Konfigurationsobjekt mit folgenden Bereichen:
- **Allgemeine Einstellungen**
Direkt auf oberster Ebene (`uniqueId`, `embedded`, `hoverActions`)
- **Menü-Konfiguration (**`**menu[…]**`**)**
Steuert das Layout der Menüleiste – z. B. Positionierung, Schriftgröße und Farben für normale und aktive Zustände
- **Menüpunkte (**`**menu[…].menuItems[…]**`**)**
Einzelne Buttons mit Titel, Icon, Aktivitätszustand und Aktionen (z. B. Feldwert ändern, Popup öffnen)
```javascript
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"
}]
}]
}]
})
```
## Allgemeine Parameter-Einstellungen
### uniqueId
**Typ:** `text`
**Pflichtfeld:** ja
Definiert eine eindeutige ID für die jeweilige Menü-Instanz. Diese ID wird intern zur gezielten CSS-Ansprache verwendet und ist notwendig, damit mehrere Menüs auf derselben Seite unabhängig voneinander funktionieren.
💡 **Tipp: **Setze die ID dynamisch, z. B. mit `uniqueId: "menu-" + Nr`, wenn du das Widget mehrfach aufrufst.
### embedded
**Typ:** `boolean`
**Default:** `false`
Legt fest, ob das Widget in ein bestehendes Widget (z. B. [Layout](https://www.arc-rider.de/documentation/custom-layout)) eingebettet wird oder als eigenständiges Widget auf der Ninox Oberfläche integriert wird.
💡 **Hinweis: **Wenn du `embedded: true` setzt, musst du sicherstellen, dass das umgebende Element eine passende Höhe und ggf. ein eigenes Layout mitbringt. Das Widget passt sich dann vollständig diesem Rahmen an.
### hoverActions
**Typ:** `object`
**Default:** kein Hover-Verhalten
Definiert das Verhalten beim Überfahren eines Menüpunktes mit der Maus.
Du kannst hier gezielt Farben und Animationen setzen, die beim Hover-Effekt angewendet werden sollen. Alle Felder sind optional – wenn du nichts angibst, bleibt das Standarddesign erhalten.
Feld
Typ
Beschreibung
`backgroundColor`
`text`
Hintergrundfarbe beim Hover. Z. B. HEX-Wert: `"#192e65"`
`fontColor`
`text`
Schriftfarbe beim Hover. Z. B. HEX-Wert: `"#fff"`
`borderColor`
`text`
Rahmenfarbe beim Hover. Z. B. HEX-Wert: `"#192e65"`
`iconColor`
`text`
Farbe des Icons beim Hover. Z. B. HEX-Wert:`"#fff"`
`animation`
`text`
Transition-Zeit, z. B. `"0.2s"` für weiche Effekte
💡 **Tipp: **Hover-Effekte verbessern die Benutzerführung deutlich – sie geben visuelles Feedback und zeigen, dass ein Element interaktiv ist. Schon ein einzelner Wert wie `backgroundColor` reicht aus, um dieses Feedback spürbar zu machen.
### borderRadius
**Typ:** `text`
**Default:** kein Radius (eckige Kanten)
Legt den Eckenradius der Menü-Buttons fest. Mit diesem Wert kannst du die Buttons abgerundet gestalten – von leicht soften Ecken bis zu pillenförmig.
Typische Werte:
- `"4px"` für leicht abgerundet
- `"12px"` für deutliche Rundung
- `"50%"` für kreisförmige Buttons
💡 **Tipp: **Ein kleiner `borderRadius` sorgt oft schon für ein moderneres, freundlicheres Erscheinungsbild – vor allem in Kombination mit Hover-Farben.
## Menü-Einstellungen (`menu[…]`)
In diesem Block steuerst du das Layout und Design der Menüleiste – also Ausrichtung, Größe und Farben. Er ist Teil des ersten Elements im `menu`-Array:
```javascript
menu: [{
tableId: tableId(current),
settings: {
menuBar: {
width: "",
position: "",
backgroundColor: "",
borderColor: "",
fontSize: "20px"
},
stateNormal: {
backgroundColor: "",
borderColor: "",
fontColor: ""
},
stateActive: {
backgroundColor: "",
borderColor: "",
fontColor: ""
}
}
}, {
menuItems: [...]
}]
```
### tableId
**Typ:** `text`
**Pflichtfeld:** ja
Definiert die Tabelle, auf die sich Aktionen innerhalb des Menüs beziehen. Auch wenn der `tableId`-Wert aktuell nicht direkt verarbeitet wird, ist er Teil der erwarteten Datenstruktur und sollte immer gesetzt werden.
### settings-Block
**Typ:** `object`
**Pflichtfeld:** ja
Enthält die visuellen Einstellungen für die Menüleiste und die Darstellung der Buttons – im normalen sowie im aktiven Zustand.
Der `settings`-Block besteht aus drei Unterobjekten:
- `menuBar` → Layout & Ausrichtung der Leiste
- `stateNormal` → Design nicht aktiver Buttons
- `stateActive` → Design aktiver Buttons
💡 **Tipp: **Wenn du Werte leer lässt, greifen automatisch sinnvolle Standardwerte – so kannst du das Menü auch minimal konfigurieren und es sieht trotzdem gut aus.
```javascript
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[]
Der zweite Teil des `menu`-Arrays enthält die eigentlichen Menüeinträge. Jeder Menüpunkt wird als Objekt in der Liste `menuItems` definiert. Ein Menüeintrag besteht in der Regel aus einem Titel, einem Icon, einem aktiven Zustand und einer oder mehreren auszuführenden Aktionen.
```javascript
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
Dieser Wert ist eine laufende Nummer, die intern zur Sortierung oder Identifikation der Menüeinträge verwendet wird.
**Typ:** `number`
**Pflichtfeld:** ja
```javascript
item: 1, // Zahlenwert. Beschrifte hier deine Menüpunkte einfach nach Anzahl.
```
### title
Hier legst du den Text fest, der im Button angezeigt wird. Der Titel ist für die Nutzer sichtbar und sollte die Funktion des Buttons klar benennen.
**Typ:** `text`
**Pflichtfeld:** ja
```javascript
title: "Übersicht",
```
***activeState*** definiert, wann dein Menüpunkt aktiv sein soll. In diesem Beispiel: Wenn der Text "A" in dem Textfeld menuText steht, dann soll der Button aktiv sein.
```javascript
activeState: if menuText = text("A") then "active" else " end,
```
### icon
Mit dem `icon`-Feld kannst du ein [Icon](https://www.arc-rider.de/documentation/custom-icon) zu deinem Button hinzufügen. Die Icons werden typischerweise über `arcCustomIcon({ name: "..." })` definiert. Wenn kein Icon angegeben wird, besteht der Button nur aus Text.
**Typ:** `function`
**Pflichtfeld:** nein
```javascript
icon: "", // Kein Icon wird angezeigt
icon: arcCustomIcon({
name: "kanban" }), // Benutze das Widget arcCiustomIcon()
```
### active
Das Feld `active` bestimmt, ob ein Menüpunkt gerade als aktiv markiert ist. Meist handelt es sich dabei um einen Ausdruck, der den aktuellen Zustand vergleicht – z. B. `Menu = "A"` oder `Menu=1`. Aktive Menüpunkte werden visuell hervorgehoben (z. B. mit einer anderen Hintergrundfarbe) und helfen den Nutzern zu erkennen, welcher Bereich gerade ausgewählt ist.
**Typ:** `boolean` oder Ausdruck
**Pflichtfeld:** ja
## actions
In `actions` legst du fest, was beim Klick auf den Button passieren soll. Du kannst hier eine oder mehrere Aktionen definieren. Jeder Aktionseintrag ist ein Objekt mit einem `type` und ggf. zusätzlichen Parametern wie `recordId`, `field` oder `value`.
**Typ:** `array`
**Pflichtfeld:** ja
💡 **Hinweis: **Jede Aktion wird in der Reihenfolge ausgeführt, in der sie im Array steht. Du kannst mehrere Aktionen kombinieren – z. B. zuerst einen Feldwert setzen und danach ein Popup öffnen.
### Mögliche Aktionen
`type`
Beschreibung
Aufbau Code
`update`
Setzt den Wert eines Feldes im angegebenen Datensatz
`recordId`, `field`, `value`
`popup`
Öffnet den angegebenen Datensatz als Popup
`recordId`
`delete`
Löscht den angegebenen Datensatz aus der Datenbank
`recordId`
### Aktion: update
```javascript
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.
}]
```
### Aktion: popup
```javascript
actions: [{
recordId: Nr,
type: "popup", // popup öffnet den Record
}]
```
### Aktion: delete
```javascript
actions: [{
recordId: Nr,
type: "delete", // delete löscht den Record
}]
```
## Fazit ✅
Mit `arcCustomMenu` kannst du flexible Menüleisten in deiner Ninox-Oberfläche erstellen – ideal zum Umschalten von Ansichten, Setzen von Feldwerten oder Öffnen von Popups.
Das Widget lässt sich vollständig an dein Design anpassen: von Farben und Schriften bis hin zu Hover- und Aktiv-Zuständen.
Let’s build smarter interfaces – with arcWidgets.
Fragen oder Feedback? → [office@arc-rider.com](mailto:office@arc-rider.com)