Category navigation
The category navigation is the bar that moves guests between the sections of a menu. It is rendered automatically on menu archives, and it carries the utility controls as well.
What it contains
- A link per category, in the order set on All categories.
- An indication of the section the guest is currently in.
- Optionally, up to three utility controls at the end: filters, favorites and language.
On a category archive it can also show the subsections of the current category.
Flat or nested
How the tree is rendered is a per-menu-type setting:
Content settings → Content settings → Use flat category navigation for … archive
- Nested (the default for most types) shows parents with their children.
- Flat shows every category at one level. This is the default for the wine list, because wine lists are browsed by family rather than drilled into.
Choose from how guests use the menu, not from how the tree is built. A two-level structure can still read better flat when the sections are all equally important.
The utility toggles
Three independent switches, per menu type, in the same settings section:
| Toggle | What it opens |
|---|---|
| Filters toggler | The allergen filter panel |
| Favorites toggler | The guest's saved items |
| Language toggler | The language switcher |
Enable only what the menu needs. The bar is narrow on a phone, and three icons plus a long category list competes for the same space.
The filters toggle is only useful when the menu type carries allergen information — see Allergen filters on the public menu. The language toggle is only useful on a multilingual site.
Colors
The navigation has three palette settings of its own, under the same Content settings screen:
- Category nav divider color — the line under the bar;
- Category nav text color — links and the active indicator;
- Category nav background color — the bar and its side fades.
They are chosen from the site palette rather than as free colors, so the navigation stays consistent with the rest of the design. See Colors and palettes.
When it does not appear
The navigation is not rendered when there is nothing to navigate:
- a menu type with a single category has no sections to move between;
- a category with no published items is not listed.
So a missing navigation is usually a content situation rather than a settings problem.
Designing categories for the navigation
Because every category becomes an entry in this bar:
- keep the names short — one or two words fit, four do not;
- keep the number of categories between three and eight;
- put the most-used section first, since it is the one visible without scrolling the bar;
- avoid two categories whose names begin with the same word, which are hard to tell apart at a glance.
Check it on a phone
- [ ] Every section is reachable.
- [ ] The bar scrolls smoothly when there are more categories than fit.
- [ ] The active section is clearly indicated.
- [ ] Category names are not truncated into ambiguity.
- [ ] The enabled utility icons are tappable, and the disabled ones are absent.
- [ ] The colors have enough contrast against the page background.
- [ ] Tapping a section actually moves the menu to it.