How to show you are on the current page with a line under the menu-item?

Design help Animations & Interactions
1

Hi,

I want this: When I am on the page Projects, I want to show a yellow line under the menu-item ‘Projects’ to show viewers that they are on the page ‘Projects’.

But I am not sure how that can be achieved. I tried some things with the state current but that is too simplistic I think. I think I have to do something with animation.

Anyone knows a solution?

I already made a static yellow line to show how it would look like in my preview below.

Here is my public share link: LINK

2

@Mourik - you can apply styles to the current page using the “Current” selector as you stated, if your need is more complex you may be able to solve with interactions or custom code, but I would need to know specifically what you are trying to accomplish.

3

I want when I am currently on the ‘producten’ page I want to see a yellow line under the menu-item like this:

image

And when I am on the ‘Over Ons’ page I want to see this: image

I don’t really know how to achieve it yet

4

@Mourik - take a look at this post:

5

I have read it, and it seems more about the animation rather than the end state. It doesn’t mention how the line can stay visible after you clicked the navlink. I hope you still understand me haha

6

@Mourik - try this:

Select your current menu item link:

image

Add a 5px border bottom in yellow:

image

Put -5 pixels of bottom margin:

image

Then go to one of the nav links that is not the current one and remove the 25px of left/right margin:

image

Then select Div Block 5 and add the left and right margin back there:

image

This will produce this effect on each menu link:

image

image

1 Like
7

Thank you Sam. I didn’t think it would be this easy!