The navigation menu is the most important element for a website, either in appearance and usability. The web menu designers are trying their best to make the menu more appealing and functional for the visitors easily find what they want. A bad navigation menu will make the visitors feel lost in the site. Here I collect some creative website navigation menus for you to find some inspirations of making your own.

Creative Flu

Read on »

On websites that have a lot of pages, breadcrumb navigation can greatly enhance the way users find their way around. In terms of usability, breadcrumbs reduce the number of actions a website visitor needs to take in order to get to a higher-level page, and they improve the findability of website sections and pages. They are also an effective visual aid that indicates the location of the user within the website’s hierarchy, making it a great source of contextual information for landing pages.

What is a breadcrumb?

A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.

You can usually find breadcrumbs in websites that have a large amount of content organized in a hierarchical manner. You also see them in Web applications that have more than one step, where they function similar to a progress bar. In their simplest form, breadcrumbs are horizontally arranged text links separated by the “greater than” symbol (>); the symbol indicates the level of that page relative to the page links beside it.

In this article, we’ll explore the use of breadcrumbs on websites and discuss some best practices for applying breadcrumb trails to your own website.

When Should You Use Breadcrumbs?

Use breadcrumb navigation for large websites and websites that have hierarchically arranged pages. An excellent scenario is e-commerce websites, in which a large variety of products is grouped into logical categories.

You shouldn’t use breadcrumbs for single-level websites that have no logical hierarchy or grouping. A great way to determine if a website would benefit from breadcrumb navigation is to construct a site map or a diagram representing the website’s navigation architecture, and then analyze whether breadcrumbs would improve the user’s ability to navigate within and between categories.

Breadcrumb navigation should be regarded as an extra feature and shouldn’t replace effective primary navigation menus. It’s a convenience feature; a secondary navigation scheme that allows users to establish where they are; and an alternative way to navigate around your website.

Types of Breadcrumbs

Location-based
Location-based breadcrumbs show the user where they are in the website’s hierarchy. They are typically used for navigation schemes that have multiple levels (usually more than two levels). In the example below (from SitePoint), each text link is for a page that is one level higher than the one on its right.

Attribute-based
Attribute-based breadcrumb trails display the attributes of a particular page. For example, in Newegg, breadcrumb trails show the attributes of the items displayed on a particular page:

This page displays all computer cases that have the attributes of being manufactured by Lian Li and having a MicroATX Mini Tower form factor.

Path-based
Path-based breadcrumb trails show users the steps they’ve taken to arrive at a particular page. Path-based breadcrumbs are dynamic in that they display the pages the user has visited before arriving on the current page.

Benefits of Using Breadcrumbs

Here are just some of the benefits of using a breadcrumb trail.

Convenient for users
Breadcrumbs are used primarily to give users a secondary means of navigating a website. By offering a breadcrumb trail for all pages on a large multi-level website, users can navigate to higher-level categories more easily.

Reduces clicks or actions to return to higher-level pages
Instead of using the browser’s “Back” button or the website’s primary navigation to return to a higher-level page, users can now use the breadcrumbs with a fewer number of clicks.

Doesn’t usually hog screen space
Because they’re typically horizontally oriented and plainly styled, breadcrumb trails don’t take up a lot of space on the page. The benefit is that they have little to no negative impact in terms of content overload, and they outweigh any negatives if used properly.

Reduces bounce rates
Breadcrumb trails can be a great way to entice first-time visitors to peruse a website after having viewed the landing page. For example, say a user arrives on a page through a Google search, seeing a breadcrumb trail may tempt that user to click to higher-level pages to view related topics of interests.

Breadcrumb Navigation Design Considerations

When designing a breadcrumb navigation scheme, keep several things in mind. Let’s take a look at some questions that might arise when you’re working with breadcrumbs.

What should be used to separate link items?
The commonly accepted and most recognizable symbol for separating hyperlinks in breadcrumb trails is the “greater than” symbol (>). Typically, the > sign is used to denote hierarchy, as in the format of Parent category > Child category.

Article Scource: http://www.smashingmagazine.com/

The navigation of a website is meant to be clicked. It shouldn’t be hard to find. It’s important that it stands out from the rest of the elements on the page with elegant style but yet still matches the overall style and color of the design. Here is a showcase of websites that achieve this in a very stylish way. These navigations look amazing, have serious click appeal, and are guaranteed to inspire you for it’s beautifully color variation with the whole website.

Positive Impressions

Hart & Huntington

Amigo in Granada

Yankee Soda

Kelt

For web designers, they always look forward to get visual appealing and better usability. It is not difficult to design attractive navigation bars and layout the wonderful website. Just adding a little creative, you can make website appealing and get better user experience.

Let’s share 5 creative navigation bars:

The menus made of scripts are great space savers for complicated websites, but the script drop down menu are difficult to build.

Let’s Do Menu Script First

 
 
 
 
 
 
Step 1: The script for the sample above uses three external files: anylinkmenu.js, menucontents.js and anylinkmenu.css. Download them first.

Step 2: Add the codes to the HEAD section of your page. (check the detailed codes at this page)

Step 3: All that’s left is setting up your link(s) so a menu drops down. The sample HTML demonstrates 3 links, one with the menu dropping down onMouseover, and the other, onClick: (check the detailed codes at this page)

Step 4: To modify the script drop down menu later, you have to customize the script menu’s contents and anchor links, and initialize the menu by scripts every time, which is very complicated and takes much time.

Furthermore, the script menu looks simple, ordinary, and not attractive enough.

Now Check DHTML Menu Builder

While, DHTML Menu Builder usually refers to a program that helps you to create script menus without much knowledge on scripts.

If a script menu is done by a menu builder, it will be much easier and faster. Usually we use Sothink DHTML Menu, a powerful and useful script menu editor. Check the script drop down menu created by the program below:

View the more script drop down menus here

1. When you launch Sothink DHTML Menu, it will pop up a window to ask you to choose templates, so pick up the one you like among them for script drop down menus. With the plentiful templates in the program, pretty and fashionable script drop down menus are easy to get.
2. After selecting the templates, what you need to do is just edit the text, color, background or anything else for the script drop down menus. And you can refer to the tutorials here for details.
3. Next, you can publish your script drop down menus to webpage, however, you needn’t write any scripts but only copy and paste the scripts which are generated by the program automatically to some specified area. Here is the tutorial.
4. If you want to modify the script drop down menu, you can just open the existing .PGT file (the project file of Sothink DHTML Menu) for the script drop down menu, make some changes with some clicks, and publish it to the website for updates.

See the Table Below for a Comparison

 
 
 
 
 
 
It is plain that menu builder is more simple to use. With a lot of templates in the builder, you could create script drop down menus in various styles; and it is also easy to modify and maintain the menu later. Moreover, the most important one is that you even need not to know much about scripts at all!

List menu refers to navigation bar on the website, which shows menu in unordered list, it enables to popup the sub-menu and quick link to the target page. Generally, list menu can be made by CSS+HTML (tag <ul>&<li>). If being familiar with HTML code, you can create a well-design drop down menu with ease; if not, you may have to take days or even weeks to learn DHTML coding before you can build you own list menu from scratch. Fortunately, Sothink DHTML Menu can help you create the professional list menu without coding.
 
 
 
 
 
 
 
 
About Sothink DHTML Menu

Sothink DHTML Menu enables to create list menu without coding. With rich templates and styles, you can create cross-browser list menu in clicks. Fully customize list menu style and free integrate with web editors to build list menu.

Download Sothink DHTML Menu >>

Start list menu with Sothink DHTML Menu

1. Start list menu with rich templates

Launch Sothink DHTML Menu. Template windows open and you can choose list menu “Business > Bullet” .

2.Modify the text and link for list menu

Modify the text and link for your website. Click the text on menu panel, select the option “Menu Item > General”, and edit the text and link in property panel below.

3. Set multi-column function for 2-level menu item in list menu

Select the menu item that includes sub menu items, and click the option “Popup Menu > Multi-Column” to make them display in list way. And adjust their sequence to make them show in right category.

After setting “multi-column” function, the program will auto-arrange the menu items from left to right orderly based on the defined row number or column number. In order to get the better layout, you must adjust the sequence of menu items for drop down menu.

4. Set resource folder for list menu and make it work locally or on Internet

Set resource folder to save JS and image files to the specific directory, which makes the list menu display correctly. Enter the “Global > Resource Folder” to set them.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
5. Publish list menu and upload the necessary resources to web server

Publish the resource files, menu code or JavaScript menu code to the specific folder, and insert two pieces of code to the tag “head” and “body” within web page. You can preview list menu locally; upload all the resource files to web server, view list menu on web.

Check the button “Publish” on the toolbar to publish list menu.
Without coding, you can edit list menu style in WYSWYG menu builder; execute the command “Copy&Paste” to insert menu code into web page; and upload all the resources to web server. Your list menu will display perfectly on the web and offer clear navigation to all your visitors.

Popup menu is widely used for web navigation, it can popup its sub-menu upon user interactions, such as moving the mouse over the menu item, or clicking the menu item to display more link items. Popup menu is designed as the hierarchy style; you will see only the top-level menu item on website if no mouse behavior involved.

The popup menu is like this:

Popup menu has the features of slim body and large volume. You can add unlimited sub menu items under the top menu. The popup menu is specially applied to the website design of compact structure and multifarious contents. It not only classifies the web pages clearly for website, but also switches to the destination page in one click. Popup menu can be vertical or horizontal style, which is pretty good decoration element for website design.

At present, many well-known companies use popup menu as navigation bar to navigate their website, such as Microsoft, Adobe, Amazon, etc. But, how can I create popup menu of my own? Be patient, I will show you the steps to create popup menu with Sothink DHTML Menu.

Sothink DHTML Menu enables you to create popup menu for compact website. With the built-in templates and rich preset styles, you can create SE friendly popup menu in clicks. Fully customize popup menu to match with web design. Freely integrate with web editors to build popup menus.

Download Sothink DHTML Menu >>

Follow me to start a popup menu now:

1. Start Popup Menu with Built-in Templates

Launch Sothink DHTML Menu. Template windows open and you can choose popup menu “Simple > Classic Silver”.

2. Add the sub menu items for this popup menu

Select the menu item which needs add sub menu items below, and click the button “Append Sub Menu Item” in the menu panel to add sub menu items.

3. Modify the text and link for popup menu

Modify the text and link for your website. Click the text on menu panel, select the option “Menu Item > General”, and edit the text and link in property panel below.

4. Set resource folder to make popup menu work well in Intranet or Internet

Set resource folder to save JS and image files to the specific directory, which makes the popup menu display correctly. Enter the “Global > Resource Folder” to set them.

5. Publish popup menu and make it display on web page

Publish the resource files, menu code or JavaScript menu code to the specific folder; and insert two pieces of code to the tag “head” and “body” within web page.

Check the button “Publish” on the toolbar and choose the option “View/Copy Code…”; the dialog opens, follow the tips to copy and paste the codes to web page; and check the option “Copy the resource files” to copy resource to the defined folder.

Finish the above steps, you can preview menu locally; and upload all the resource files to web server to view popup menu on Internet.