Highlight the current section in the main navigation

When a shopper is inside a category, the matching item in the main navigation should look different: underlined, bold or coloured. It answers "where am I?" without a thought. This check looks for an active state in the menu.

Why it matters

Orientation is a quiet part of shopping. People who feel lost stop exploring. The active state is also a cue to move sideways to a neighbouring category.

What the audit looks at

The audit checks whether the main navigation marks the section the shopper is in.

What usually causes it

• A theme with no current-page style
• A mega menu that closes and shows nothing active
• A custom menu that does not set the current class
• Mobile menus that never indicate position

How to fix it

Mark the section the shopper is in. The effort is small, usually a setting or a paste and under 30 minutes.

1. Highlight the current section in the main navigation so shoppers always know where they are.
2. Use aria-current="page" on the active link, and a visible style such as underline or weight.

On Shopify

1. This needs a small change in the header navigation snippet in Online Store > Themes > Edit code: add a class or aria-current to the link that matches the current page.

On WooCommerce

1. The WordPress menu adds a current-menu-item class to the active item; style it in your theme CSS.

How to check it yourself

1. Open a category and look at the main menu.
2. Compare the menu item with others.
3. Check subcategories and the mobile menu.

Frequently asked questions

Is breadcrumb enough?

Breadcrumbs help, but the menu active state is the fastest cue and works on category pages too.

What style works best?

A clear underline or bolder colour is enough.

Related checks

• The viewport meta tag: make your store render properly on phones
• Title tags and meta descriptions for store pages: length, content and what to avoid
• Add to cart buttons: what makes shoppers find and use them