k2

Navigation bar at a glance

Site Genre: Pattern Group k

magnify imageFigure K2.1 Epicurious has a top running navigation bar one that runs across the top of the page on its Web site.

Background

From MULTIPLE WAYS TO NAVIGATE (B1), we know we need a consistent interface for browsing and searching a site. The BROWSABLE CONTENT (B2) and SEARCH ACTION MODULE (J1) patterns provide the fundamentals for building a browsable structure and straightforward search. Navigation bars are a common way to provide access to the main parts of your Web site. This pattern describes how to create navigation bars that your customers will find useful.

Close

PROBLEM

Customers need to be able to reach the most important parts of your Web site in a structured, organized way that is easy to understand and use.

buy the book to find out more

SOLUTION

magnify image Figure K2.4 Create a navigation bar that runs along the top and/or left side.

Coordinate top-level and second-level navigation in a navigation bar along the top and/or left side of each Web page. Use text, or both icons and text, as links inside the navigation bar.

Other Patterns to Consider

If your navigation bar uses images, make sure they’re FAST-LOADING IMAGES (L2). Navigation bars that use OBVIOUS LINKS (K10) are the clearest. Alternatively, by using HTML POWER (L4) to create a background color distinct from the body copy background color, and by keeping the navigation bar to the left or the top, you can bend the rules of OBVIOUS LINKS (K10) and remove the underlines or change the link color to something other than blue. TAB ROWS (K3) are often used for top-level navigation. One advantage of tab rows is that they clearly show customers which category they’re currently viewing. CLEAR FIRST READS (I3) are sometimes placed at the top left corner of a Web page, affecting the placement of navigation bars.

Close

 

Pattern Resources

PATTERN COMMENTS

POST A COMMENT and/or EXAMPLE WEB SITE

Sign in Form

(required)

(required, but not displayed)

Have a idea for a new pattern group? Join our disscussion on new pattern ideas.