• Home Page

• Website Services

• Introduction
• Website Design
• Website Implementation
• Website Testing
• Management & Hosting
• Text Style Gallery
• Colour Gallery
• Navigation Gallery
• Examples
• Document Services
• Picture Services

• General

• Fees Summary
• Obtain Quote
• Pay Invoice
• Contact Us
• Link To Us

• Terms & Conditions

• Our Services
• Site Use & Privacy
• Cookies Use

Website Navigation Style Gallery

This page presents the range of different styles for navigation controls that Aardstorm has available as standard for use in implementing the pages of your new website, so that you can easily instruct us to use the styles of your choice. If you want something different from the range presented here, we will be happy to provide you with a quote for a custom style.

The navigation controls presented here will be used by the users of your new website to move between the different pages These will typically consist of horizontal rows and/or vertical columns of links to the various pages and sections of your site, each with a brief text label to describe the destination of that link. These links will also appear in a consistent position on each page, and will typically use colour to distinguish them from the rest of the page. Colours may also be used to indicate your user's current position within the site.

Horizontal rows can accommodate fewer links than vertical columns, and therefore in a large site will normally provide access to the main sections or other particularly important pages of the site. On a large site, with several sections of pages, the vertical column of links may also be arranged to reflect the section structure, with different colours to highlight the links to other sections, and the links to individual pages within a section only appearing on the pages of that section. The navigation controls for this site provide a working example of this sectionalisation.

In addition to the main navigation controls, some sites also benefit from other navigation features. Where there is a hierarchy of sections and sub-sections, then a 'breadcrumb trail' at the top and/or bottom of each relevant page can help users keep track of where they are within the site. This is a simple row of text links that provide access to the pages higher up in that part of the hierarchy. Particularly lengthy pages can also benefit from links to guide users to different sections within the page. These can take the form of a 'table of contents' section at the top of the page, and/or an extra row of footer links at the bottom. We will automatically include these extra navigation features on the relevant pages of your site whenever we feel they will benefit your site's users.

Note: in the examples below, we have used a single colour scheme and text style for simplicity; you can choose the colours and text styles for your new site to obtain the look you require. We have also chosen different colours fom the rest of this site, to emphasise the fact that these are examples, not active navigation controls; although they have been made to look like real controls, they are not linked to a real destination, and will not take you anywhere.

Text Links

Navigation Buttons

Buttons are normally be used for main navigation bars, and can be arranged in horizontal rows or vertical columns, as shown below. The individual buttons can be uniform in colour, as shown here, or variations in tone or colour can be used to distinguish section links from page links, or even to colour-code different sections of your site. The colour of the background bar behind the buttons can also be the same as the buttons themselves, as shown here, or it can be different. There are two main button styles: a flat, two-dimensional representation, with a simple outline shape to distinguish each button from its background, or a more elaborate three-dimensional representation, with highlights and shading to define each button.

In both cases, the underline decoration on each button label (that by convention normally identifies an active link) can either be static, as shown for the flat buttons here, or can appear dynamically when the user moves the mouse over it as shown for the 3-D buttons, or it can even be totally absent, as shown for the 3-D tabs, below. In the latter case, reliance is placed on the effectiveness of the button representation and the change of mouse pointer icon to indicate an active link.

Navigation Tabs

Tabs are a specal type of button that are normally used for the main header navigation bar, located immediately below the header logo on each page. The individual buttons can be uniform in colour, as shown here, or variations in tone or colour can be used to distinguish section links from page links, or even to colour-code different sections of your site. The colour of the background behind the tabs noramally matches the the logo background, and can continue any vertical gradation of shading or pattern repetition, so that the tabs appear to be on top of the logo. As with the buttons described above, tabs are available with a simple, flat, 2-D representation, or a more elaborate 3-D representation.

In both cases, the underline decoration on each button label (that by convention normally identifies an active link) can either be static, as shown for the flat tabs shown here, or can appear dynamically when the user moves the mouse over it as shown for the 3-D buttons above, or it can even be totally absent, as shown for the 3-D tabs. In the latter case, reliance is placed on the effectiveness of the tab representation and the change of mouse pointer icon to indicate an active link.

The label text colour is also typically varied to indicate the current page or section. In the 3-D style this is reinforced by adding a drop-shadow effect and overlapping the tab outlines, so that adjacent tabs appear to be on top of each other, and the current tab is on top of them all. In the examples below, 'link 2' is assumed to correspond to the current section.