Vertical Navigation Bar

Step 1: Creating the Workspace:

Start with a 300 x 500 document and fill in the background as #E5E5E5

Step 2: Create the first Navigation Tab

Make a new layer and grab your rectangular Marquee tool and make a selection like so:

Fill in the selection with a neutral white #FFFFFF:

Apply the following blending options to this layer:

Drop Shadow:

Inner Shadow:

Gradient Overlay:

Stroke:

After applying all of those settings, you should end up with a bar that looks like this:

Step 3: Add in some text to this Tab

Lets add in some text and drop down arrow to finish this first tab off.

Grab your text tool and Set your font to Trebuchet MS, Bold, Size 18px and colour set as #46d6f7 Write some text in like so and then position it similar to my example:

Step 4: Getting a simple Arrow shape

Now lets add in the arrow. Grab your font tool again and choose the font called Weddings, Regular Settings, Size 24px and then press the number 6 on the keyboard to give you this:

Go to Edit > Transform > Rotate 90 CCW to make the arrow point to the right:

You may wonder why your arrow looks different to the tutorial? Well it's because you need to add in a stroke to the arrow layer. Add in this stroke setting:

Step 5: Duplicate your work

Next duplicate all the layers we have created so that's the Actual bar layer, text layer and arrow layer and then position it underneath the previous tab we made:

Step 6: Changing to a Open Tab

Duplicate it once more but we will be changing this third bar, so listen up! Once you have duplicated the tab and positioned it below the second one. Change the text to Open tab or something like that like so:

Then highlight the arrow layer in the panel and the go to Edit > Transform > Rotate 90 CW so it will make the arrow point down like so:

Step 7: Create the open extended content box

Next grab your rectangular marquee tool and make a selection like so:

Fill in the selection with #e0e0e0 to give you this:

Finally give this selection a stroke. Apply this setting below:

The open tab's selection should now look like this:

Step 8: Add in some text to the content area

Now add in some text, for this tutorial I am using Trebuchet MS, Regular setting, Size 12px. Colour as #a6a6a6. Write in your text to get something like this:

Step 9: Change the colour slightly

On the open tab's bar layer right click on it's layer and change the gradient overlay setting where the reverse tick box is ticked make it unticked to give you a slight colour change on the open tab:

Step 10: Duplicate some more closed tabs

Finally duplicate a few of the closed tabs again and position them underneath the open tab like so:

The Final Result

There we have it a relatively simple vertical navigation bar!