Navigation Menu

Dual-table architecture

MenuItems defines the top bar buttons. DropdownItems holds all dropdown content, linked via MenuID. This separation lets you modify dropdown content independently and keeps formulas clean.

Three active states

Menu buttons highlight in three scenarios: when their dropdown is open, when clicked as a direct link (e.g. Dashboard), or when a child dropdown item was last selected and the dropdown is closed. All three use the ActiveColor property.

Adaptive column layout

When DropdownColumns is 2, the panel checks if Column 2 items exist for the active menu. If not, it renders a narrow single-column panel. On screens under 500px, all items collapse into a single scrollable column regardless of the setting.

Click-outside dismiss

A transparent backdrop sits behind the dropdown panel and catches clicks anywhere inside the component below the nav bar. It is deliberately offset below the bar so it never intercepts clicks on the menu buttons themselves.

Screens have no OnSelect property, so dismissing from anywhere else on the screen needs a transparent button instead. Add this as the first control on your screen, above everything else in the tree, so it renders at the bottom of the z-order and never competes with your other controls.

      - btnScreenDismiss:
          Control: Classic/Button@2.2.0
          Properties:
            BorderStyle: =BorderStyle.None
            Color: =RGBA(0, 0, 0, 0)
            Fill: =RGBA(0, 0, 0, 0)
            FocusedBorderThickness: =0
            Height: =Parent.Height
            HoverFill: =RGBA(0, 0, 0, 0)
            OnSelect: =Set(_navOpenMenu, Blank())
            PressedFill: =RGBA(0, 0, 0, 0)
            Text: =""
            Visible: =!IsBlank(_navOpenMenu)
            Width: =Parent.Width
            X: =0
            Y: =0

The Visible condition keeps the button out of the way entirely when no dropdown is open.

Built-in icons

The Icon field supports 9 built-in names: Layout, FileText, BarChart, Settings, Code, Book, Rocket, Zap, Sparkles. You can also pass raw SVG strings or data:image/svg+xml URIs for custom icons.

Responsive behavior

On desktop (500px+), buttons size between 120–160px with 14px font. On mobile (<500px), buttons lock at 120px min with 12px font and the nav bar becomes horizontally swipeable. Two-column dropdowns collapse to a single column, and section headers hide to avoid confusion.

Nav bar height coupling

The nav bar is 48px tall, or 68px when ShowNavScrollbar is true. The dropdown backdrop offsets by the same amount so it starts flush underneath the bar. If you customize the bar height, update the backdrop Height and Y to match, or clicks on the nav bar will be intercepted while a dropdown is open.