The tagged navigation is the grid of category buttons (chips) near the top of your app’s home screen — each one tied to a tag or category, so tapping it takes the user straight into that section of the app. This article walks through laying out and styling that grid: how many rows and buttons appear, whether the buttons are oval-shaped, and what colors they use.

Every control for it lives in one place, so you can shape the whole grid in a single pass.

Goal

A tidy grid of category navigation buttons on the home screen that matches your brand — the right number of rows and columns, the shape you want, and colors that read clearly against whatever background sits behind them.

Prerequisites

• An app project in Mobile App Manager with mam-main active.
• The tags or categories you want the grid to point at already exist on your site. The tagged navigation surfaces existing taxonomy terms; it does not create them.
• Admin access to App Settings for the app you are editing.

Note: This article only covers how the tagged-navigation grid looks — its layout and styling. Which terms actually appear in it, and their order and icons, comes from your home-screen category configuration instead; see Related below for where to manage that.

Where these settings live

Every control in this article lives in App Settings → Home Screen. Open that section in Mobile App Manager and scroll down to the tagged-navigation controls — they’re all part of the home-screen settings category, so you’ll find them grouped together.

Don’t see a setting you’re expecting? It may just be hidden by default in your build — see the note on equal-width chips in Step 4.

Steps

1. Set the grid size (rows and columns)

Two settings define the shape of the grid:

• Tagged Navigation: Number of Rows (home_tagged_nav_number_of_rows) — how many rows of buttons appear. Valid values are 1 to 4.
• Tagged Navigation: Number of Buttons Wide (home_tagged_nav_number_of_buttons) — how many buttons appear per row. Valid values are 3 or 4.

Combine them and you can build anything from a 3×1 strip up to a full 4×4 grid — 16 buttons at most. Pick the smallest grid that still shows the categories your users reach for most; a crowded grid is harder to scan than a focused one.

2. Decide what happens when there are more terms than slots

Sometimes you’ll have more eligible terms than the grid has room for. Turn on Limit button count to number of rows? (tagged_nav_limit_button_count) and the button count gets capped to fit the rows you configured, so the grid stays clean instead of overflowing. Leave it off if you’d rather every eligible term show up, however many that is.

3. Choose the button shape

Turn on Make MDC Chips Oval Shaped? (hs_make_chips_oval) and the Material (MDC) chips render with an oval/pill shape instead; leave it off for the default, more rectangular shape. It’s purely a style choice — pick whichever fits the rest of your app.

4. (Optional) Make chips equal width

Filter Bar Chips Equal Width (home_chip_width_same) makes every filter-bar chip the same width instead of sizing each one to its label — the result is a more uniform, evenly-spaced row.

Heads up: this setting is hidden in the standard settings UI in the current build, so don’t be surprised if you don’t see it on the Home Screen page. If you need it and it isn’t visible, contact MAM Suite support rather than assuming it’s missing.

5. Set the colors

Then style the grid with these color controls:

• Tagged Navigation Background Color (home_tagged_nav_background) — the background behind the grid. Default #ffffff.
• Tagged Navigation Text Color (tagged_button_color) — the button label color. Default #000000.
• Tagged Navigation Icon Color (tagged_button_icon_color) — the button icon color. Default #000000.
• Transform Tagged Nav Icon Colors? (tagged_button_transform_color) — when on, the button icons are tinted to match the configured icon color. Turn this on if your icons ship in a single flat color and you want them recolored to match your scheme; leave it off if your icons are multi-color artwork you want preserved.

Double-check contrast before you move on — dark text and icons on a light background, or the reverse. Low contrast is one of the most common reasons a grid looks “off” once you see it on a real device.

6. (Optional) Use a transparent background and dividers

Two more toggles decide whether the grid sits on its own panel or blends right into the home screen:

• Clear background for Tagged Navigation (tagged_nav_clear_background) — turn this on and the grid gets a transparent background, letting the home-screen backdrop show through instead. This overrides the background color from Step 5, so you’re choosing between a solid color and a clear background, not both.
• Show lines between buttons? (tagged_nav_show_lines) — turn this on to draw divider lines between buttons. Handy when the buttons share a background and you want a little visual separation.

7. Save and preview

Save your App Settings, then preview the home screen in a test build or on a device — that’s the only way to know for sure it looks right. Check on a real screen that:

• The grid shows the rows/columns you configured.
• Labels and icons are legible against the background.
• The shape and dividers look the way you intended.

Adjust and preview again until it reads cleanly.

Tips

• Start small. A 3×2 grid of your highest-traffic categories almost always beats a packed 4×4 — you can always grow it later.
• Consistency over flourish. Equal-width chips plus one consistent icon-tint color make the grid look intentional; mix and match and it reads as accidental instead.
• Background vs. clear. Reach for a solid background color when the grid should feel like its own section, and a clear background when you want it to blend into a branded home-screen backdrop.

Related

• Configure which categories appear in the home-screen grid — managing the terms, order, and icons that fill the tagged navigation (home-screen category configuration).
• App Setting Reference: home_tagged_nav_number_of_rows
• App Setting Reference: home_tagged_nav_number_of_buttons
• App Setting Reference: hs_make_chips_oval
• App Setting Reference: tagged_button_color, tagged_button_icon_color, home_tagged_nav_background

What’s next

Once the grid looks right, move on to the rest of the home screen — the featured/horizontal scrollers, the search bar placement, and the tab bar — so your tagged navigation sits inside a finished home screen instead of standing on its own.