Features

The Global Toolbar is more than a static button bar. It reacts to your context, animates transitions and remembers your preferences.

Context-aware buttons

As soon as you navigate to a different route, the toolbar checks which buttons make sense now and swaps them in.

Action	What happens
You open Forum	Forum settings and category buttons appear
You open Feed	Feed settings and template buttons appear
You open Shop	Products, categories, shipping, etc. show up
You leave the module	Module buttons disappear, global buttons remain

Global buttons (theme toggle, help, edit mode, App Builder Tools, Web-Bridge) are always there and separated from module buttons by a vertical divider.

Animated transitions

When switching routes, buttons aren’t swapped abruptly — they animate:

New buttons fade in with a scale effect (300 ms, ease-out-back)
The toolbar width smoothly resizes to the new button count (300 ms)
The toolbar’s appearance itself is a soft fade-in

It looks polished — and helps you notice new buttons instead of missing them.

Horizontal scrolling

If many modules are active and the page has many actions, not all buttons may fit at once.

In that case the button list becomes horizontally scrollable:

Soft gradient indicators with arrow icons appear at the edges
Swipe horizontally over the buttons to navigate them
The toolbar itself stays centered — only the inner area scrolls

Notification badges

Buttons can show a small counter badge, e.g. for open reports in the admin area. Values above 99 are displayed as 99+ so the badge doesn’t overflow.

When the toolbar is docked (see Docking) and one of the hidden buttons has a badge, the edge indicator shows a small notification dot — so you can see at a glance that something needs attention.

Vertical drag

You can drag the toolbar vertically to your preferred position:

Press and hold the toolbar anywhere
While dragging, a drag indicator (dot icon) appears
Move it up or down
On release, the new position is automatically saved

The toolbar respects two boundaries:

Minimum offset from the bottom: 16 px (above the safe area)
Maximum height: screen height minus 200 px

So you cannot push it off-screen.

Horizontal swipe → docking

Swipe the toolbar to the left or right screen edge to dock it — it transforms into a small indicator and frees up the screen. Details in the Position & Docking chapter.

Built-in search

On the left of the toolbar you’ll find a compact magnifier. Tap it to expand the search field and find any module, page or setting in seconds.

Edit Mode toggle Important

The pencil button toggles the app’s Edit Mode:

Edit Mode on: editing affordances are visible, widgets are editable, layouts can be rearranged
Edit Mode off: the app behaves as it does for your end users

The Edit Mode button is only visible when Edit Mode is globally enabled in the app configuration. Otherwise it is hidden to avoid confusion.

Theme toggle

The leftmost button is the dark/light mode toggle. It has the highest priority and therefore always sits at the outer edge. Its icon switches dynamically:

Sun: you’re in dark mode → tap switches to light mode
Moon: you’re in light mode → tap switches to dark mode

Use it to test how your app looks in both modes in seconds.

Open App Builder Tools

The wrench button opens the App Builder Tools dashboard — the central hub for the Theme Suite, Page Builder, Form Builder and modules.

Tap it again to close the dashboard (toggle behavior).

Help button

The question mark button opens contextual help for the page you’re currently on. You land directly in the matching documentation chapter — for example, this page if you were reading the toolbar docs.

Web-Bridge (QR code scanner)

If at least one web-capable module is active, an additional QR code scanner button appears. Use it to pair the App Builder with the Web-Bridge so you can manage content from the browser.

If no web-capable module is active, the button is automatically hidden — pairing without a target module would be a dead end.