Loading...

Create a Navigation Menu

Export Kit makes PSD Navigation Menus and links a simple task. Nav Menus are a group of anchor links used to direct users to both internal and external pages. Nav Menus are involved in all common designs for both websites and applications. You can create navigation menus in a few easy steps with Export Kit.

Before creating a Navigation Menu you should read about Link Tags.

Step-By-Step Video


Need a visual? Watch our step-by-step tutorial!

Watch more video tutorials.

Step 1. Design Your Menu

Add your menu design to the PSD Document.

Your menu design should reflect how a menu is coded and not how you visualize a menu. Keep in mind a menu is used to give users navigation points, so do not use a single text block to create a nav menu.

You must design your menus to reflect the number of navigation items you require. Eg. if you need 4 nav links, then you must create 4 individual elements in your PSD design.

Do Not Use Paragraph Menus

COMMON MISTAKE: Its very common for designers to draw the area of the nav menu with paragraph text >> then write the nav menu labels in the single text block.

Consider a nav menu will require individual buttons to navigate to each page link. You will need an individual text layer per button to correctly place links and organize your content. When you use a sinlge paragraph block for your menu, you are forcing all actions to reflect ONE object.

Step 2. Add Links

Use Link Tags for layers,
eg. ${link:http://google.com}

Add the Link Tags to the layers you want to use as buttons. Once you add the tags, each layer will become a native button in the Output. When selected, the user will navigate to the supplied url based on the Link Tags.

Use Class Tags for folders,
eg. ${class|a:href="http://google.com"}

We strongly recommend you add your Class Tags as the PARENT folder of your elements, this will maintain your element properties.

Working With Folders

Remember with folder groups, you can still control the mouse actions (over, out, click, etc.) of the folder object in code after the export. The link will preset the elements you want as web links.

Download the Layer Tag Support free PSD tempalte to test Link Tags with your output.
LOGIN NOW: You need to login so your progress is tracked with Online Training - click here.

Products For Android Professionals


android_pack

Android Pack

android_pack

Android Pack (6 Months)

android_pack

Android Pack

Need a custom solution?

Try our Shop!

Using the Plugin

Layer Support

Layer Tags

How To Guides

Optimization Tips

Help Us Improve


We aim to keep our content relevant with useful information, examples, samples and links. Tell us what you think!

I found the content:

Helpful
Confusing
Outdated
Broken Links
Bad Spelling
Too Short
Too Long

This page needs:

Nothing
Better Content
Links
Examples
Videos

Free Download


Cheat Sheet

A full sample of our support for text, shapes, images and effects.

Start Your 14 Day Free Trial

New users get instant access to the 14 Day Free Trial with all features enabled, and Free Online Training. We guarantee your first conversion will 100% work - we work with you to ensure this, contact us or check our FAQs for assistance.

Connect With Us

Top