D01 Primary Gateway Nav

This most commonly used variation of the D1 Gateway Navigation component is the simplest and uses just Primary Links with corresponding Child Links and a Tertiary Link to "See all" in a gray background. It uses one column width for both the Primary Section Header and the content underneath because it appears next to another similar column of content.

If there are several main categories on a page, it is desirable to have them side by side using two thinner columns so that users see both categories at a glance and don't have to scroll. Primary Links under each main catgory are then ordered either by their importance to Sun and to users or alphabetically.

To help users find the most important or most sought-after information, only the top 3 categories or items should be used as Child Links, with a "See all" link at the bottom to cue them that the list is only partial. Limiting the list of Child Links to 3 also keeps the page length shorter so users don't have to scroll far to see all of the sub-categories. "See all" leads to the same page as clicking on the Primary Link.

This variation of the D1 Gateway Navigation component has one Primary Section Header with two columns of content underneath. It is desirable to use two columns when there is only one Primary Section Header on a page. This way page length is shorter?important categories can appear side-by-side and users do not have to scroll to see all the categories on a page.

This variation also uses Product/Service Imagery in addition to Primary Links, Child Links, Tertiary Links (See all), and Body Copy. This imagery illustrates key categories and is used primarily on e-commerce oriented Gateway pages like Sun Store or Sun Catalogue. Since these pages are meant to sell product it is acceptable to add imagery of key products or services to make the page more visually enticing and consumer-oriented. Too much imagery can clutter the page and interfere with navigation so restraint should be used when using these images.

Body Copy descriptions are used in place of Child Links when subcategories are not clear cut or when a description is needed to clarify a category name.

This variation is used when there is a Primary Section Header with only one category (Primary Link) underneath. In these cases the Primary Section Header spans the entire Primary Navigation area, as does the light gray background that contains the descriptive Body Copy or Child Links.

This example shows a description under the category because the name is not common knowledge or self-explanatory. Child Links with a Tertiary Link to "See all" should be used in place of the descriptive Body Copy in most cases however, especially when their addition would help clarify the Primary Link.