Creating Video

You are here : HomeCreating Graphics for the WebCreate a Navigation Bar

introduction3.1 Navigation bars


A navigation bar, also known as a ‘nav bar’, is a series of buttons that appears on one or more pages on a website. Typically, all the buttons within a nav bar look the same, except for the identifying text that tells the user where the link will take them. In a navigation bar the buttons are aligned so that they appear as one continuous graphic. A navigation bar can be horizontal or vertical.

To be fit for purpose a navigation bar needs to be easy to use. It should be obvious from the text labels where each button will take the visitor. The text should be easy to read – with a suitable font and good use of contrasting colours to make the text stand out from the background.

To prevent a navigation bar from being too confusing, only the main page sections are included. To incorporate sub-sections, some designers use drop down menus, or sub menus, that change when one of the main sections is selected. Depending on intended audience, site navigation bars tend to make use of complimentary or contrasting colours. Refer back to Section 2 for more information on colour and contrast.

Navigation bars can be many different shapes, although rectangular buttons or rounded rectangles are commonplace. Here are some examples of navigation bars from different websites

Q magazine navigation bar

The navigation bar above is from the Q Magazine website at It's a simple, one row, navigation bar with a simple silver colour scheme. On mouseover the buttons turn red.

Boomerang navigation

This navigation bar is taken from the Boomerang website at The buttons are clear and easy to read. Each button combines text with a graphical icon indicating what page the button links to. The site is aimed at children and so the graphics have a fun, playful feel and are suitable for that audience and purpose of the site.

The navigation bar on the Serif website at uses large square buttons with a drop down menu which changes as the user moves the mouse across the navigation bar. The drop down menu provides links to sub-sections of the Serif site.

The navigation bar reflects the clear businesslike design of a website aimed at selling software to adults.

Serif Navigation

Providing alternative navigation options

As well as using graphics to make attractive navigation bars and buttons, it is also good practice to provide alternative ways of navigating the website. Some users may have graphics turned off, or may be visually impaired and use a screen reader.

At the bottom of a website there is usually a series of text links that link to the main areas of the site such as in this example from the NBA website:

NBA navigation

Previous PageMain Site Indexsection indexNext page