Sticky menu text states

Elements
1

I’ve placed some of my pages in folders. The inspector (for the sticky menu) allows me to apply colours for the page titles in an ACTIVE, and a DEFAULT state.

This is working as expected, but the ACTIVE state is not displaying for my page folder titles.

Can anyone help?

2

@Dan, can you please shed some light on this query?

3

Because folders can’t be selected, they will not be “highlighted”.

Only the active page will be highlighted.

Hope that helps clear things up.

4

@Dan, I understand what you’re saying but from a user’s point of view, it’s not great.

My current RW site uses a menu (built by Elixir/Foundry) that highlights the folders as active. This lets users see where they are within the site.

Isn’t there a way to make the sticky menu work like this? Surely most web designers would want the active states flagged up for the folders too!?!

5

It sounds as if you’re asking for a breadcrumb. It’s easy to build a breadcrumb in Elements, and third-party options already exist.

6

Thom, I’m using elements to build simple sites with components, I don’t want to tinker.

Hoping @Dan will be able to offer a solution. :crossed_fingers:

7

Elements already provides a breadcrumb component if one is needed.

9

Hi @Dan, I really don’t like to gripe but for me, the menu component is beginning to feel like a cheese and pickle sandwich without the pickle. I personally feel that active states are essential navigation features.

Your guide shows that page folders are central to the build process so to find this omission is surprising.

Is there any chance that you could edit the menu to fix this problem? (I imagine other users would also welcome the edit.)

10

Hey @Rich2020,

Totally understand, we’ll discuss this internally and see what’s possible.

On the surface this sounds like a reasonable request, but this is actually trickier than it seems as the current page needs to be aware of it’s parents…

However, @ben is away this week, so I’ll get him to take a look next week when he’s back.

Stay tuned!

11

Thanks Dan. :crossed_fingers:

12

@Rich2020

I create my own menu, using Elements code from the API section

State is a folder, I was trialling with showing active pages for an area of the menu I was creating, you can seen even under a folder I was showing which page was active, started on the mobile version, then created what I wanted afterwards

13

Thanks Steve.

14

Hi @Rich2020

Good news, we’ve just fixed this for the Navbar component, and it’ll be included in the next update.

What’s changed:

  • Folders now show active states. When the current page lives inside a folder, that folder (and any nested folders in between) now picks up your configured Active styling — so visitors can always see which section they’re in.
  • Submenu links fixed too. While we were in there, we found that links deeper inside dropdowns and mobile submenus weren’t being highlighted even when they were the current page. That’s now fixed at every level, on both desktop and mobile.

There’s nothing new to configure, this update uses the same Active state colours you already set under Nav Items in the Navbar inspector, so it just works. It’s also done in an accessibility-friendly way: only the actual current page is marked as such for screen readers, while parent folders get their own styling hook.