Creating Video

You are here : HomeCreating Graphics for the Web › Research Web Graphics

factfile1.3 Navigation bars and buttons

Navigation bars

Graphical navigation bars provide an easy way for visitors to a website to navigate between main sections of the site. Using images instead of plain text makes the navigation bar more visually interesting, although symbols may not immediately be understood. Colour is often used to link related sections of a web site, as below. Navigation bars may be made of smaller graphics, but they are arranged close together to look like a single coherent image.

A graphical navigation bar often extends along the top or down the side of a web page and includes text, images, or animations, displayed as buttons that link to other sections or pages in the site. Buttons are sometimes used in isolation, but are more often found grouped together as navigation bars.

Tesco Real Food

A good example of a navigation bar can be seen on the Tesco Real Food website. The site uses two rows of buttons. The top row links to the main categories of the site (Recipes, Our Food etc). The colour of the buttons changes depending on which area of the site is active. The second row changes text and colour depending on the section of the website the visitor is accessing to show the subsections of the site.

More information on navigation bars can be found in section 4 of the unit on Creating a Multimedia Web page.

Navigation buttons

As well as a main navigation bar, websites will often also have elsewhere on the page other buttons that are used for navigation to other sections of the site. These buttons are made to look separate from each other, unlike a graphical navigation bar. They will usually share a house style and will probably have been made from the same basic shape, as with these three buttons from the website of Direct Line Insurance:


Previous PageMain Site Indexsection indexNext page