Stylish Navigation Menu

Start by creating a new file. I have used 709x47 pixels for my file.

Fill the background with #454545 color.

Now, we will create a pattern to fill the background. Create a new file (30 x 30 pixel wide), set the background to transparent, click on pencil tool to select it and set the size to 1 pixel. Draw a single block, after zooming in the file to 800 percent. Select rectangular marquee tool to select the area as shown. Now, go to edit>Define Pattern and give your name as you like :

Close this file and return to our original one. Now, go to edit>fill and select our newly created pattern to fill the background :

With rectangle tool, draw this shape :

Draw another shape with rectangle tool. Use #2F371F color for this one :

Draw another shape. This time, use #3F4830 color for this shape :

Rasterize this layer. Now, add these layer styles in it :

With polygonal lasso tool, draw this selection :

Press delete :

Move the selection by pressing shift+right arrow key towards right side and press delete. :

Inside the deleted part, draw this selection :

Create a new layer by pressing shift+ctrl+n together and fill the selection with black :

Apply Bevel and Emboss as shown :

Duplicate this layer by pressing ctrl+j and place it as shown :

Now, with the help of line tool, draw this 2 pixel weight line.

Reduce the opacity to 23% :

Draw this 1 pixel wide line :

Again reduce the opacity to 23%.

Draw a circle with ellipse tool :

Apply similar Bevel and Emboss effect in it.

Now, type in your text. Our navigation menu is ready :)

Click to enlarge