Horizontal Menu

Top navigation with popover submenus — the persistent site navigation for a screen set.

Reach for it when you need:

• The main navigation bar of a project

Component name: HorizontalMenu · Category: Navigation

In the palette: Top navigation with popover submenus

Properties

Any property can be bound to a tag, another component's property, or a query.

Property	Type	Default	Description
menu	array	[{"label":"Dashboard","icon":"LayoutDashboard","link":{"path… (truncated)	—
↳ menu.label	string	New Item	—
↳ menu.key	string	""	Stable id for this item, available to the Menu item click event as {{item.key}}.
↳ menu.icon	icon	Circle	Lucide icon name
↳ menu.description	string	""	—
↳ menu.visible	boolean	true	Off = the item is removed entirely and leaves no space. 1.0.8
↳ menu.disabled	boolean	false	Grey the item out and block clicks (and, for a group, opening it). Applies to its sub-items too. 1.0.8
↳ menu.position	number	—	Sort order within this level (lower first). Empty = its place in the list. 1.0.8
↳ menu.pin	enum	start	start = with the rest; end = parked at the far end (bottom of a vertical menu, right of a horizontal one). Options: start · end.
↳ menu.link	object	{}	— 1.0.8
↳ menu.link.path	string	""	— 1.0.8
↳ menu.link.linkType	enum	auto	auto = detect from the path; internal = a project route (SPA navigation); external = a URL outside the app. Options: auto · internal · external. 1.0.8
↳ menu.link.openIn	enum	auto	auto = same tab for an internal route, new tab for an external URL. Options: auto · same · new. 1.0.8
↳ menu.normal	object	{}	Resting text and background colour. 1.0.8
↳ menu.normal.color	color	""	— 1.0.8
↳ menu.normal.backgroundColor	color	transparent	— 1.0.8
↳ menu.hover	object	{}	— 1.0.8
↳ menu.hover.color	color	hsl(var(--foreground))	— 1.0.8
↳ menu.hover.backgroundColor	color	rgba(161, 161, 170, 0.1)	— 1.0.8
↳ menu.active	object	{}	Colours while the item is the current page. 1.0.8
↳ menu.active.color	color	hsl(var(--foreground))	— 1.0.8
↳ menu.active.backgroundColor	color	rgba(161, 161, 170, 0.15)	— 1.0.8
↳ menu.font	object	{}	—
↳ menu.font.fontSize	number	—	—
↳ menu.font.fontWeight	enum	—	Options: normal · bold · semibold · medium · light.
↳ menu.font.fontStyle	enum	—	Options: normal · italic.
↳ menu.font.textAlign	enum	—	Options: left · center · right.
↳ menu.font.letterSpacing	number	—	—
↳ menu.font.lineHeight	number	—	—
↳ menu.font.textDecoration	enum	—	Options: none · underline · line-through.
↳ menu.font.textTransform	enum	—	Options: none · uppercase · lowercase · capitalize.
↳ menu.badge	object	{"value":"","fontColor":"","fontSize":10,"backgroundColor":"… (truncated)	—
↳ menu.badge.value	string	""	—
↳ menu.badge.fontColor	color	""	—
↳ menu.badge.fontSize	number	10	—
↳ menu.badge.backgroundColor	color	""	—
↳ menu.gap	number	4	—
↳ menu.security	object	{}	Optional role gating for this item. Leave roles empty = visible to everyone.
↳ menu.security.requiredRoles	roles	[]	Pick the roles allowed to see this item (from the bound User Database). Empty = shown to everyone.
↳ menu.security.roleMatch	enum	any	any = holds at least one role; all = holds every listed role. Options: any · all.
↳ menu.security.denyBehavior	enum	hide	hide = remove the item; disable = grey it out and block clicks. Options: hide · disable.
↳ menu.subMenu	array	[]	—
↳ menu.subMenu.label	string	New Item	—
↳ menu.subMenu.key	string	""	Stable id for this item, available to the Menu item click event as {{item.key}}.
↳ menu.subMenu.icon	icon	Circle	Lucide icon name
↳ menu.subMenu.description	string	""	—
↳ menu.subMenu.visible	boolean	true	Off = the item is removed entirely and leaves no space. 1.0.8
↳ menu.subMenu.disabled	boolean	false	Grey the item out and block clicks (and, for a group, opening it). Applies to its sub-items too. 1.0.8
↳ menu.subMenu.position	number	—	Sort order within this level (lower first). Empty = its place in the list. 1.0.8
↳ menu.subMenu.link	object	{}	— 1.0.8
↳ menu.subMenu.link.path	string	""	— 1.0.8
↳ menu.subMenu.link.linkType	enum	auto	auto = detect from the path; internal = a project route (SPA navigation); external = a URL outside the app. Options: auto · internal · external. 1.0.8
↳ menu.subMenu.link.openIn	enum	auto	auto = same tab for an internal route, new tab for an external URL. Options: auto · same · new. 1.0.8
↳ menu.subMenu.normal	object	{}	Resting text and background colour. 1.0.8
↳ menu.subMenu.normal.color	color	""	— 1.0.8
↳ menu.subMenu.normal.backgroundColor	color	transparent	— 1.0.8
↳ menu.subMenu.hover	object	{}	— 1.0.8
↳ menu.subMenu.hover.color	color	hsl(var(--foreground))	— 1.0.8
↳ menu.subMenu.hover.backgroundColor	color	rgba(161, 161, 170, 0.1)	— 1.0.8
↳ menu.subMenu.active	object	{}	Colours while the item is the current page. 1.0.8
↳ menu.subMenu.active.color	color	hsl(var(--foreground))	— 1.0.8
↳ menu.subMenu.active.backgroundColor	color	rgba(161, 161, 170, 0.15)	— 1.0.8
↳ menu.subMenu.font	object	{}	—
↳ menu.subMenu.font.fontSize	number	—	—
↳ menu.subMenu.font.fontWeight	enum	—	Options: normal · bold · semibold · medium · light.
↳ menu.subMenu.font.fontStyle	enum	—	Options: normal · italic.
↳ menu.subMenu.font.textAlign	enum	—	Options: left · center · right.
↳ menu.subMenu.font.letterSpacing	number	—	—
↳ menu.subMenu.font.lineHeight	number	—	—
↳ menu.subMenu.font.textDecoration	enum	—	Options: none · underline · line-through.
↳ menu.subMenu.font.textTransform	enum	—	Options: none · uppercase · lowercase · capitalize.
↳ menu.subMenu.badge	object	{"value":"","fontColor":"","fontSize":10,"backgroundColor":"… (truncated)	—
↳ menu.subMenu.badge.value	string	""	—
↳ menu.subMenu.badge.fontColor	color	""	—
↳ menu.subMenu.badge.fontSize	number	10	—
↳ menu.subMenu.badge.backgroundColor	color	""	—
↳ menu.subMenu.gap	number	4	—
↳ menu.subMenu.security	object	{}	Optional role gating for this item. Leave roles empty = visible to everyone.
↳ menu.subMenu.security.requiredRoles	roles	[]	Pick the roles allowed to see this item (from the bound User Database). Empty = shown to everyone.
↳ menu.subMenu.security.roleMatch	enum	any	any = holds at least one role; all = holds every listed role. Options: any · all.
↳ menu.subMenu.security.denyBehavior	enum	hide	hide = remove the item; disable = grey it out and block clicks. Options: hide · disable.
↳ menu.subMenu.subMenu	array	[]	—
↳ menu.subMenu.subMenu.label	string	New Item	—
↳ menu.subMenu.subMenu.key	string	""	Stable id for this item, available to the Menu item click event as {{item.key}}.
↳ menu.subMenu.subMenu.icon	icon	Circle	Lucide icon name
↳ menu.subMenu.subMenu.description	string	""	—
↳ menu.subMenu.subMenu.visible	boolean	true	Off = the item is removed entirely and leaves no space. 1.0.8
↳ menu.subMenu.subMenu.disabled	boolean	false	Grey the item out and block clicks (and, for a group, opening it). Applies to its sub-items too. 1.0.8
↳ menu.subMenu.subMenu.position	number	—	Sort order within this level (lower first). Empty = its place in the list. 1.0.8
↳ menu.subMenu.subMenu.link	object	{}	— 1.0.8
↳ menu.subMenu.subMenu.link.path	string	""	— 1.0.8
↳ menu.subMenu.subMenu.link.linkType	enum	auto	auto = detect from the path; internal = a project route (SPA navigation); external = a URL outside the app. Options: auto · internal · external. 1.0.8
↳ menu.subMenu.subMenu.link.openIn	enum	auto	auto = same tab for an internal route, new tab for an external URL. Options: auto · same · new. 1.0.8
↳ menu.subMenu.subMenu.normal	object	{}	Resting text and background colour. 1.0.8
↳ menu.subMenu.subMenu.normal.color	color	""	— 1.0.8
↳ menu.subMenu.subMenu.normal.backgroundColor	color	transparent	— 1.0.8
↳ menu.subMenu.subMenu.hover	object	{}	— 1.0.8
↳ menu.subMenu.subMenu.hover.color	color	hsl(var(--foreground))	— 1.0.8
↳ menu.subMenu.subMenu.hover.backgroundColor	color	rgba(161, 161, 170, 0.1)	— 1.0.8
↳ menu.subMenu.subMenu.active	object	{}	Colours while the item is the current page. 1.0.8
↳ menu.subMenu.subMenu.active.color	color	hsl(var(--foreground))	— 1.0.8
↳ menu.subMenu.subMenu.active.backgroundColor	color	rgba(161, 161, 170, 0.15)	— 1.0.8
↳ menu.subMenu.subMenu.font	object	{}	—
↳ menu.subMenu.subMenu.font.fontSize	number	—	—
↳ menu.subMenu.subMenu.font.fontWeight	enum	—	Options: normal · bold · semibold · medium · light.
↳ menu.subMenu.subMenu.font.fontStyle	enum	—	Options: normal · italic.
↳ menu.subMenu.subMenu.font.textAlign	enum	—	Options: left · center · right.
↳ menu.subMenu.subMenu.font.letterSpacing	number	—	—
↳ menu.subMenu.subMenu.font.lineHeight	number	—	—
↳ menu.subMenu.subMenu.font.textDecoration	enum	—	Options: none · underline · line-through.
↳ menu.subMenu.subMenu.font.textTransform	enum	—	Options: none · uppercase · lowercase · capitalize.
↳ menu.subMenu.subMenu.badge	object	{"value":"","fontColor":"","fontSize":10,"backgroundColor":"… (truncated)	—
↳ menu.subMenu.subMenu.badge.value	string	""	—
↳ menu.subMenu.subMenu.badge.fontColor	color	""	—
↳ menu.subMenu.subMenu.badge.fontSize	number	10	—
↳ menu.subMenu.subMenu.badge.backgroundColor	color	""	—
↳ menu.subMenu.subMenu.gap	number	4	—
↳ menu.subMenu.subMenu.security	object	{}	Optional role gating for this item. Leave roles empty = visible to everyone.
↳ menu.subMenu.subMenu.security.requiredRoles	roles	[]	Pick the roles allowed to see this item (from the bound User Database). Empty = shown to everyone.
↳ menu.subMenu.subMenu.security.roleMatch	enum	any	any = holds at least one role; all = holds every listed role. Options: any · all.
↳ menu.subMenu.subMenu.security.denyBehavior	enum	hide	hide = remove the item; disable = grey it out and block clicks. Options: hide · disable.
↳ menu.subMenu.subMenu.subMenu	array	[]	—
↳ menu.subMenu.subMenu.subMenu.label	string	New Item	—
↳ menu.subMenu.subMenu.subMenu.key	string	""	Stable id for this item, available to the Menu item click event as {{item.key}}.
↳ menu.subMenu.subMenu.subMenu.icon	icon	Circle	Lucide icon name
↳ menu.subMenu.subMenu.subMenu.description	string	""	—
↳ menu.subMenu.subMenu.subMenu.visible	boolean	true	Off = the item is removed entirely and leaves no space. 1.0.8
↳ menu.subMenu.subMenu.subMenu.disabled	boolean	false	Grey the item out and block clicks (and, for a group, opening it). Applies to its sub-items too. 1.0.8
↳ menu.subMenu.subMenu.subMenu.position	number	—	Sort order within this level (lower first). Empty = its place in the list. 1.0.8
↳ menu.subMenu.subMenu.subMenu.link	object	{}	— 1.0.8
↳ menu.subMenu.subMenu.subMenu.link.path	string	""	— 1.0.8
↳ menu.subMenu.subMenu.subMenu.link.linkType	enum	auto	auto = detect from the path; internal = a project route (SPA navigation); external = a URL outside the app. Options: auto · internal · external. 1.0.8
↳ menu.subMenu.subMenu.subMenu.link.openIn	enum	auto	auto = same tab for an internal route, new tab for an external URL. Options: auto · same · new. 1.0.8
↳ menu.subMenu.subMenu.subMenu.normal	object	{}	Resting text and background colour. 1.0.8
↳ menu.subMenu.subMenu.subMenu.normal.color	color	""	— 1.0.8
↳ menu.subMenu.subMenu.subMenu.normal.backgroundColor	color	transparent	— 1.0.8
↳ menu.subMenu.subMenu.subMenu.hover	object	{}	— 1.0.8
↳ menu.subMenu.subMenu.subMenu.hover.color	color	hsl(var(--foreground))	— 1.0.8
↳ menu.subMenu.subMenu.subMenu.hover.backgroundColor	color	rgba(161, 161, 170, 0.1)	— 1.0.8
↳ menu.subMenu.subMenu.subMenu.active	object	{}	Colours while the item is the current page. 1.0.8
↳ menu.subMenu.subMenu.subMenu.active.color	color	hsl(var(--foreground))	— 1.0.8
↳ menu.subMenu.subMenu.subMenu.active.backgroundColor	color	rgba(161, 161, 170, 0.15)	— 1.0.8
↳ menu.subMenu.subMenu.subMenu.font	object	{}	—
↳ menu.subMenu.subMenu.subMenu.font.fontSize	number	—	—
↳ menu.subMenu.subMenu.subMenu.font.fontWeight	enum	—	Options: normal · bold · semibold · medium · light.
↳ menu.subMenu.subMenu.subMenu.font.fontStyle	enum	—	Options: normal · italic.
↳ menu.subMenu.subMenu.subMenu.font.textAlign	enum	—	Options: left · center · right.
↳ menu.subMenu.subMenu.subMenu.font.letterSpacing	number	—	—
↳ menu.subMenu.subMenu.subMenu.font.lineHeight	number	—	—
↳ menu.subMenu.subMenu.subMenu.font.textDecoration	enum	—	Options: none · underline · line-through.
↳ menu.subMenu.subMenu.subMenu.font.textTransform	enum	—	Options: none · uppercase · lowercase · capitalize.
↳ menu.subMenu.subMenu.subMenu.badge	object	{"value":"","fontColor":"","fontSize":10,"backgroundColor":"… (truncated)	—
↳ menu.subMenu.subMenu.subMenu.badge.value	string	""	—
↳ menu.subMenu.subMenu.subMenu.badge.fontColor	color	""	—
↳ menu.subMenu.subMenu.subMenu.badge.fontSize	number	10	—
↳ menu.subMenu.subMenu.subMenu.badge.backgroundColor	color	""	—
↳ menu.subMenu.subMenu.subMenu.gap	number	4	—
↳ menu.subMenu.subMenu.subMenu.security	object	{}	Optional role gating for this item. Leave roles empty = visible to everyone.
↳ menu.subMenu.subMenu.subMenu.security.requiredRoles	roles	[]	Pick the roles allowed to see this item (from the bound User Database). Empty = shown to everyone.
↳ menu.subMenu.subMenu.subMenu.security.roleMatch	enum	any	any = holds at least one role; all = holds every listed role. Options: any · all.
↳ menu.subMenu.subMenu.subMenu.security.denyBehavior	enum	hide	hide = remove the item; disable = grey it out and block clicks. Options: hide · disable.
↳ menu.subMenu.subMenu.subMenu.subMenu	array	[]	—
↳ menu.subMenu.subMenu.subMenu.subMenu.label	string	New Item	—
↳ menu.subMenu.subMenu.subMenu.subMenu.key	string	""	Stable id for this item, available to the Menu item click event as {{item.key}}.
↳ menu.subMenu.subMenu.subMenu.subMenu.icon	icon	Circle	Lucide icon name
↳ menu.subMenu.subMenu.subMenu.subMenu.description	string	""	—
↳ menu.subMenu.subMenu.subMenu.subMenu.visible	boolean	true	Off = the item is removed entirely and leaves no space. 1.0.8
↳ menu.subMenu.subMenu.subMenu.subMenu.disabled	boolean	false	Grey the item out and block clicks (and, for a group, opening it). Applies to its sub-items too. 1.0.8
↳ menu.subMenu.subMenu.subMenu.subMenu.position	number	—	Sort order within this level (lower first). Empty = its place in the list. 1.0.8
↳ menu.subMenu.subMenu.subMenu.subMenu.link	object	{}	— 1.0.8
↳ menu.subMenu.subMenu.subMenu.subMenu.link.path	string	""	— 1.0.8
↳ menu.subMenu.subMenu.subMenu.subMenu.link.linkType	enum	auto	auto = detect from the path; internal = a project route (SPA navigation); external = a URL outside the app. Options: auto · internal · external. 1.0.8
↳ menu.subMenu.subMenu.subMenu.subMenu.link.openIn	enum	auto	auto = same tab for an internal route, new tab for an external URL. Options: auto · same · new. 1.0.8
↳ menu.subMenu.subMenu.subMenu.subMenu.normal	object	{}	Resting text and background colour. 1.0.8
↳ menu.subMenu.subMenu.subMenu.subMenu.normal.color	color	""	— 1.0.8
↳ menu.subMenu.subMenu.subMenu.subMenu.normal.backgroundColor	color	transparent	— 1.0.8
↳ menu.subMenu.subMenu.subMenu.subMenu.hover	object	{}	— 1.0.8
↳ menu.subMenu.subMenu.subMenu.subMenu.hover.color	color	hsl(var(--foreground))	— 1.0.8
↳ menu.subMenu.subMenu.subMenu.subMenu.hover.backgroundColor	color	rgba(161, 161, 170, 0.1)	— 1.0.8
↳ menu.subMenu.subMenu.subMenu.subMenu.active	object	{}	Colours while the item is the current page. 1.0.8
↳ menu.subMenu.subMenu.subMenu.subMenu.active.color	color	hsl(var(--foreground))	— 1.0.8
↳ menu.subMenu.subMenu.subMenu.subMenu.active.backgroundColor	color	rgba(161, 161, 170, 0.15)	— 1.0.8
↳ menu.subMenu.subMenu.subMenu.subMenu.font	object	{}	—
↳ menu.subMenu.subMenu.subMenu.subMenu.font.fontSize	number	—	—
↳ menu.subMenu.subMenu.subMenu.subMenu.font.fontWeight	enum	—	Options: normal · bold · semibold · medium · light.
↳ menu.subMenu.subMenu.subMenu.subMenu.font.fontStyle	enum	—	Options: normal · italic.
↳ menu.subMenu.subMenu.subMenu.subMenu.font.textAlign	enum	—	Options: left · center · right.
↳ menu.subMenu.subMenu.subMenu.subMenu.font.letterSpacing	number	—	—
↳ menu.subMenu.subMenu.subMenu.subMenu.font.lineHeight	number	—	—
↳ menu.subMenu.subMenu.subMenu.subMenu.font.textDecoration	enum	—	Options: none · underline · line-through.
↳ menu.subMenu.subMenu.subMenu.subMenu.font.textTransform	enum	—	Options: none · uppercase · lowercase · capitalize.
↳ menu.subMenu.subMenu.subMenu.subMenu.badge	object	{"value":"","fontColor":"","fontSize":10,"backgroundColor":"… (truncated)	—
↳ menu.subMenu.subMenu.subMenu.subMenu.badge.value	string	""	—
↳ menu.subMenu.subMenu.subMenu.subMenu.badge.fontColor	color	""	—
↳ menu.subMenu.subMenu.subMenu.subMenu.badge.fontSize	number	10	—
↳ menu.subMenu.subMenu.subMenu.subMenu.badge.backgroundColor	color	""	—
↳ menu.subMenu.subMenu.subMenu.subMenu.gap	number	4	—
↳ menu.subMenu.subMenu.subMenu.subMenu.security	object	{}	Optional role gating for this item. Leave roles empty = visible to everyone.
↳ menu.subMenu.subMenu.subMenu.subMenu.security.requiredRoles	roles	[]	Pick the roles allowed to see this item (from the bound User Database). Empty = shown to everyone.
↳ menu.subMenu.subMenu.subMenu.subMenu.security.roleMatch	enum	any	any = holds at least one role; all = holds every listed role. Options: any · all.
↳ menu.subMenu.subMenu.subMenu.subMenu.security.denyBehavior	enum	hide	hide = remove the item; disable = grey it out and block clicks. Options: hide · disable.
gap	number	8	—
size	enum	inherit	Row height, text and icon size of every item. Project default = the project's Control size (Project settings → Theme). An item's own font size still wins for that item. Options: inherit · xs · sm · md · lg · xl. 1.0.8
align	enum	left	Where the items sit along the row when the menu is wider than them. Options: left · center · right.
showExternalIcon	boolean	true	Mark items that leave the app with a small arrow glyph.
disabled	boolean	false	Disable the whole menu: every item greyed out and inert. 1.0.8
style	style	{}	Custom CSS properties

Events

Attach event actions to these in the Event Manager.

Event	Label	Group	Payload
click	Click	Mouse	The DOM event.
dblclick	Double click	Mouse	The DOM event.
contextmenu	Right click	Mouse	The DOM event.
mouseenter	Mouse enter	Mouse	The DOM event.
mouseleave	Mouse leave	Mouse	The DOM event.
itemClick	Menu item click	Menu	The clicked item, under item: { key, label, path, href, external, newTab, level, index, hasSubMenu }.

Right-click behaves differently in the Designer

contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.

Notes

Menu item settings were regrouped in 1.0.8, and saved views are not converted

A menu saved by 1.0.7 opens with its items' destinations and colours gone: the items render, but they no longer navigate and draw in the theme colours. Re-enter them under the new names:

1.0.7 (on each item)	1.0.8
path, linkType, openIn	link.path, link.linkType, link.openIn
color, backgroundColor	normal.color, normal.backgroundColor
hoverColor, hoverBackgroundColor	hover.color, hover.backgroundColor
activeColor, activeBgColor	active.color, active.backgroundColor
font.fontColor	removed — it duplicated normal.color

A script or binding that wrote the old keys into menu needs the same change.

Internal and external items

Each item's destination lives in its link group — path, linkType and openIn — and declares what its path means:

• internal — a route inside the project. It is prefixed with the project slug and navigated in-app with no page reload, so a path that happens to look like a hostname (reports.2024/summary) still resolves as a route.
• external — an address outside the app. A bare host is given https:// so the browser does not resolve it against the current page, it opens in a new tab by default with rel="noopener noreferrer", and a small arrow marks it so an operator knows the click leaves the HMI.
• auto (the default) — work it out from the path. Fine for obvious cases; state it explicitly when the path is ambiguous.

Use link.openIn to override the tab in either direction: auto follows the kind, same keeps the operator on the current screen, new opens a second tab.

Making an item do more than navigate

An item does not have to go anywhere. Leave its link.path empty, give it a key, and handle Menu item click in the Event Manager. The chain receives the clicked item, so ONE handler on the menu covers every entry — each action guarded by the item it belongs to.

Every action is available (popover, panel, notification, sign in, sign out, set tag, set variable, send message, run script) because this is the same action list every other widget uses.

Worked example: Help opens a popover, Sign out signs out

1. Build the popover content. Create a view — say HelpCard — with whatever the popover should show, and give it a size (300 x 200 is a reasonable card). It needs no routing path: a popover hosts it in place.

2. Key the items. Select the menu and open the menu property. On the Help item set key to help; on the Sign out item set it to logout. Leave both link.path fields empty — these items run actions rather than navigating. (linkType and openIn disappear once a path is empty, which is the schema telling you the same thing.)

3. Open the handler. Right-click the menu on the canvas, choose Menu item click.

4. Add the popover. Add action → Popover. Set View to HelpCard, Anchor to This widget, and leave Side on Auto so it places itself wherever there is room.

5. Guard it to the Help item. On that action tick Only run this action when…, then:

Field	Value
source	{{item.key}} — use the picker, under Event data
operator	is
value	help

Without the guard the popover would open for every item in the menu, because the handler belongs to the whole widget rather than to one entry.

6. Add the second action. Add action → Sign out, guarded the same way with {{item.key}} is logout. Guarded actions are skipped cleanly — a skipped action records no result and raises no error, so the two never interfere.

7. Test in preview. Help opens the popover, Sign out signs out, and every other item navigates exactly as before.

Passing the clicked item into the view

Once the popover view declares params, the action shows a View Param table. Any payload field can go straight in:

Param	Value
topic	{{item.key}}
title	{{item.label}}

The full payload is {{item.key}}, {{item.label}}, {{item.path}}, {{item.href}}, {{item.external}}, {{item.newTab}}, {{item.level}}, {{item.index}} and {{item.hasSubMenu}}.

Guard on the key, never the label

Renaming "Sign out" to "Log out" would silently unwire a guard that tested the label. The key is yours and changes only when you change it.

The event fires for submenu entries too, and it fires before any navigation — so an item can both run actions and follow its path.

Showing, hiding, ordering and disabling items New in 1.0.8

Every item — top level or inside a submenu — has three state fields, all bindable:

• visible — off removes the item entirely: no element, no gap. This is different from the widget's own Visible, which hides the box but keeps its space. An item hidden this way is hidden in the editor too; select the menu and edit it in the menu property to bring it back. A group with no path of its own disappears when all of its children are hidden.
• position — a sort key within the item's own level. Lower comes first; an item without one sorts by its place in the list (0 for the first item, 1 for the second…), and equal positions keep the list order. Each submenu is ordered on its own, and pinned items are ordered among themselves. Bind it to reorder the menu from a tag.
• disabled — greys the item out, takes it out of the tab order and blocks clicks. A disabled group does not open, and its children are disabled with it. The widget-level disabled disables the whole menu at once.

Colours per state Changed in 1.0.8

Colours are grouped by state: normal, hover and active each hold a color and a backgroundColor. active applies while the item is the current page and is hidden on an external link, which never can be. Typography is in font.

Size New in 1.0.8

size sets the row height, text and icon of every item — xs 28 · sm 32 · md 36 · lg 44 · xl 52 px rows. Project default (inherit, the default) follows the project's Control size, and the flyouts of a submenu follow their menu. An item with its own font.fontSize keeps it.

Fields, buttons and menus draw smaller after upgrading to 1.0.8

Before 1.0.8 these widgets had one size, what is now md (a 44 px field). The project's Control size defaults to sm (36 px), sized for desktop dashboards, and every widget whose size is Project default follows it — which is every widget in an upgraded project. On a touch panel, set Project settings → Theme → Control size to md or larger: 44 px is the touch-target minimum.

Parking one item at the far end

Set an item's pin to end and it renders in its own group at the far end of the menu — the bottom of a vertical menu, the right of a horizontal one — while everything else stays together at the start. This is per item, which is the point: Sign in, Sign out and Settings need to sit apart from the navigation, and a whole-menu alignment cannot say that.

Pin as many as you like; their order within the pinned group is still yours. pin applies to top-level items only — a submenu opens as a flyout, so it has no far end of its own.

Fields appear as they become relevant

linkType and openIn only show once an item has a link.path, and no destination field shows on an item that has children — a group expands, it never navigates. The active colours are hidden on an external item, which can never be the page you are on.

Where the items sit

Set align to left, center or right to park the items along the bar when it is wider than they are.