Navigation zones

Your app’s structure is the set of features you place and where you place them. There are five zones, and each one behaves differently on a phone.

The five zones

Zone	Where it appears	Capacity
Bottom Nav	A tab bar fixed to the bottom of the screen	Up to 8
Top Nav	A tab strip under the app header	No limit
Upper Nav	A header bar stacked above the top nav	Up to 3, none on Free
Side Nav	A drawer that slides in from the edge	Depends on your plan
Background	Not navigation — screens reached by tapping	One of each

Bottom Nav

The primary navigation, and the one your members will use most. Put the three to five things people open every day here.

Capacity is eight, on every plan. That is a layout limit rather than a commercial one: Flutter’s tab bar degrades past about eight destinations, and the cap stops you shipping something unusable.

Two styles: a standard bar, or floating glass, which lifts the bar off the bottom edge with a translucent ground. There is also a hide on scroll option that gets the bar out of the way while reading. Both live behind the gear beside the zone’s name, with the rest of its appearance settings.

Top Nav

A strip of tabs under the header, for switching between related views. It has no cap, because the strip scrolls horizontally.

Useful for a set of peers — Feed, Groups, Events — where bottom navigation is already full. It also supports hide-on-scroll, behind the same gear.

Upper Nav

A second header bar stacked above the top nav, sharing its row with the menu button, the logo and the title.

Capacity is three, and that is a layout limit — there is only so much room beside a logo. Upper navigation is not included on Free; Pro and Unlimited both get all three slots.

Each feature can override whether it shows the upper bar, or inherit the app’s default.

Side Nav

A drawer, opened by a Sidebar Trigger feature placed in another bar. Use it for everything that matters but is not daily: account settings, help, sign out, secondary sections.

Capacity is 8 items on Free and 50 on Pro and Unlimited, per drawer. This is the one navigation cap that is commercial rather than physical: a drawer scrolls, so nothing about the screen stops it growing. A Parent Menu occupies one of those slots, and holds the same figure again in children.

How many drawers you get is a separate figure on the same principle: one on Free, ten on Pro and Unlimited. The strip above the drop zone shows where you are against it.

Three things it does that no other zone does:

Parent menus. A Parent Menu is a group header holding sub-items, so a long drawer stays readable.

More than one drawer. On Pro and Unlimited you can define up to ten named drawers and have different Sidebar Trigger features open different ones. Free has the single drawer every app starts with.

A search box. Turn on Show search box for a drawer and members get a field at the top of it that filters the drawer as they type. It matches group headings as well as items — searching for something inside a collapsed group opens the group to show it. Worth turning on once a drawer is long enough that scanning it takes a moment; unnecessary on a drawer of six.

Placing features across the five navigation zones

Background

Not navigation. These are screens your members reach by tapping something rather than by choosing a destination:

• Single Post — tapping a post in a list or a feed.
• Single Page — tapping a link to a WordPress page.
• Activity Thread — tapping a post’s comments.
• Verified Users and Online Users — badges and indicators shown in other screens.

A missing background feature makes taps do nothing

If Single Post is not placed, tapping a post in your feed does nothing at all. There is no error, because from the app’s point of view there is nowhere to go. This is the most common cause of “the list works but the items do not open”.

Only one of each is allowed. Adding a second is refused.

Frosting the bars

Every zone on this page can be drawn as frosted glass instead of solid, from Navigation Surface under Appearance. Content then scrolls underneath the bars rather than stopping at them, which is what makes the effect read.

It applies to the whole shell at once — the upper nav, top nav, back bar, bottom bar and the sidebar drawer — rather than being set per zone. Bars that sit together should look like one surface, and a glass top nav above a solid upper nav reads as a mistake rather than a choice.

Two things follow from content passing underneath. A screen with nothing to scroll shows almost no effect, since there is nothing moving under the bar to blur. And a webview tab is pushed below the chrome rather than under it: the page inside knows nothing about your bars, so underlapping it would hide its first heading.

The floating bottom bar is unaffected — it has always been glass, on both platforms, whatever this setting says.

Choosing a structure

A structure that works for most communities:

• Bottom Nav: Feed, Directory, Chat, Profile — the daily four.
• Side Nav: Settings, Events, Groups, Notes, sign out.
• Background: Single Post, Single Page, Activity Thread.
• Top Nav: nothing, until you have a set of peers that needs it.

Start smaller than you think. Every screen you place is a screen your members have to understand, and an empty tab is worse than an absent one.

When it does not work

Symptom	Cause	Fix
A bar refuses another tab	Bottom is capped at 8, upper at 3	Move something to the side drawer
The drawer strip has no +	You are at your plan’s drawer count	The strip says how many you have; upgrade for more
Upper Nav will not accept anything	Upper navigation is not on Free	See Plans and limits
The drawer never opens	No Sidebar Trigger is placed in a visible bar	Place one in the bottom or top bar
Tapping a list item does nothing	The matching background feature is missing	Add it on the Background tab
A tab is missing for some members	A role or audience restriction is set on it	Check the tab’s Restrictions, or turn on Keep the button visible to people who can’t open it

Next

Feature settings.