How is this tab menu designed

[Stefan Cargoski]

Hi community.

How is this tab menu designed, seamlessly blending in with the top bar each time the tab switches?

It has a borderline colour going around as shown in the example. I want to be able to design this style, and be able to export it as individual files for programming. 

Thank you.

[Bojan Živković]

These are shapes with a stroke that can be added as a shape's stroke from the options bar or as a layer effect from the Layer Style dialog.

[Stefan Cargoski]

I managed to make a menu with shapes, inactive and active tabs. The problem I see is, when the menu buttons are inactive the borderline of the bar is a problem. I masked the borderline so the buttons can click on and off, covering up the line. So as NinzaHost said, its a Javascript feature, so I should give the programmer the shapes, and he does the rest.

[Bojan Živković · Accepted solution]

Not sure what is causing the stroke of the active tab to be covered. However, you can adjust the layer order to resolve this issue by moving layers or shapes with inactive buttons below the active button in the layers stack. If you take a screenshot with the layers panel expanded and visible, it might provide a clue about what is happening.