How to Navigate to Category Page with Highlighted Selection and Product List Display

Hello everyone,

I’m working on a website and want to set up navigation for product categories in a way that provides a smooth user experience. Here’s what I’m aiming for:

  1. When a Category is Clicked: For example, if I click on “Category 3” from the sidebar or footer, it should navigate to a new page showing only the products in that category (see attached screenshot for reference).
  2. Highlight Active Category: Once I’m on the “Category 3” page, I’d like that category to appear highlighted or bold in the sidebar (and footer if possible) to indicate it’s the active selection.

Screenshots: I’ve attached two images:

  • The first one is my footer, where I’d also like the active category to be highlighted if possible.

  • The second one shows the desired product list view for “Category 3.”

Questions:

  • How do I set up the navigation so that clicking a category takes me to the correct page?
  • What’s the best way to apply a bold style or other highlight to the active category?

I haven’t created the website yet, but I’d like to understand how to achieve this before I start. Thanks in advance for your help! Any guidance on the approach, whether with CSS or JavaScript would be greatly appreciated!