How to design menu like Google menu

Hello all. this menu design is so amazing, how to design a menu like that, with rounded underline and with less width than the text, the attached photo depicts my meaning clearer. thanks
Untitled

1 Like

Hi,
That looks very much like Google’s material design tabs component.

I would use that as a starting point and then tweak it to suit your needs.

2 Likes

Without looking at the original I would use a pseudo element like this.

The pseudo element is absolutely placed at the bottom of the anchor and set at 80% of its width (change to suit.)

Loads of other ways to do this.

If you want to see how google does it then use the developer tools in your browser and study the code. That’s the easiest way to learn.:slight_smile:

2 Likes

thank you so much for replying, this code works well, but I faced an issue, the 80% width only applied to active link, the others still show full width underline even with 80% width, if I decrease it to 60% in the active link it will be too small, how can I fix that?