Most website creators have to think about how users will navigate their site. I say most and not all because if you have a very simple site that consists of just a single page, you really do not need navigation unless your page has multiple topics and requires the user to scroll to see them all. (Then you might want to use section headers and a Table of Contents to allow the user to quickly jump to the topic in which they are interested. More on headers at another time.)
Suppose that your website has only a few pages. Besides the home page, you might have an About Me/Contact Us page and two or three other pages. An example taken from my site https://nueweb.org has the following menu across the top of the page.
This menu consists of only four topics. The selected topic is displayed as bold text while the others are regular text and more of a grey than a black font color. To go to one of the other pages, you need only click on the one you want to go to. In addition to pages on your site, a menu item can also link to another site. In my case, the My Old School Site is just a link to a site I supported in a previous life.
Usually, horizontal menus appear across the top of your website. However, they can also appear across the bottom of the page. The probably with putting it on the bottom of the page is that if the user must scroll to see the menu options, they may not even both and go to a different site instead.
It is also reasonable to create a menu that appears vertically on the left side of the page. (Left because we read left to right.) This orientation is useful when you have more links that can fit horizontally across the top of the page. You never want a horizontal menu to wrap around to a second line. One reason for this is related to the ADA concern that clickable links must have sufficient vertical space between them so that visitors with issues pointing and clicking their mouse are less likely to click the wrong link. If you have a lot of menu links or if the number of links can vary by the user or by the user’s action, placing them vertically along the left side of the page with plenty of space between each line is a common alternative. This menu method is used by Outlook, Google Mail, and many others to display your mail folders since you can add or remove folders at any time and you can have dozens of individual folders.
Another way around a large horizontal menu is to have as the last button on the right an option to display more menu items. The three dots in a horizontal line shown below or three stacked horizontal lines (known as a hamburger button) show a typical vertically oriented dropdown menu box.
But what if you have a series of pages that are related to the main topic rather than being separate topics in themselves. In this case, a dropdown menu from an option in a horizontal menu like the one shown above can in theory support any number of items. However, as a practical standard, you do not want the dropdown to have so many items that the user would have to scroll vertically to see all of them. Because they won’t.
For a vertical menu, an indented submenu is a common way to expand the menu with subtopics such as the one shown on Microsoft’s Start Menu. This image shows what happens when the Windows System folder is clicked to show the programs found within it. The same technique could be applied to web pages related to a common topic.
Another way to display a submenu is through the use of a ‘flyout’ menu. In the example below, the dropdown for the horizontal menu item, Academics, first lists various academic areas for a school. Next, the Performing Arts menu item from the dropdown has a fly-out menu that includes Band, Chorus, Orchestra, and Theatre. Similarly, the Band menu item has a fly-out for different band groups that are supported. Note that each menu item that has additional menu selections in a fly-out is indicated by a right-pointing arrow to hint to the user that there are more options.
Some sites have a large number of different topics and while a menu structure could serve to display links to each of the topics, sometimes a sitemap on a separate webpage with all of the topics listed is a better alternative. In the example shown below, a site map shows all the departments within an organization as links. The site visitor can then click on the department page to get redirected to the top page of that department. That does not mean that the department only has a single page. Indeed, it may have its own menu of individual pages and subtopics using any of the above navigation methods including this one. The point is that you do not want to display these subtopics in a menu off the website’s main page because the sheer number of subtopics across all departments would be too much information for most users to easily navigate. Therefore, the Home page of the site may have a single link for Departments which shows links to this page displaying the sitemap from which the user can select the department they need to visit.
Rather than use a separate page for a site map, this same basic structure can also appear as a drop-down menu. But since the dropdown has more than one column, it is often referred to as a mega-menu.
The use of an individual image sometimes referred to as an icon image, can also serve as a menu provided the image has a properly defined title and alt properties to help the visually impaired. It is also possible to use an image with hotspots that the user can click on to navigate to different parts of the website. Sometimes that image uses graphics that the user might readily identify with an action or perhaps one or more words of text. In either case, the problem with this type of menu is that it is probably not ADA compliant because a blind user would not easily know where to click on the image or perhaps that they even must. To make the menu ADA compliant, you might need a secondary menu like one of the above structures to help blind visitors to your site navigate around. Also, if you do use text on an image, the font color of that text must contrast with the background color according to the ADA rules of color contrast which are:
- Text and images of text that is at least 14 points and bold or at least 18 points must have a color contrast ratio between the text color and the background of at least 3:1.
- All other text and images of text must have a contrast ratio of at least 4.5:1.
See: Must Text Color Contrast with the Background of an Image? – NUEWeb
NUEWeb 