In this tutorial we will take you through how to create different types of basic navigation menu using HTML lists and links.
In this article you’ll learn about different types of navigation menus and how to create them in HTML. We’ll also touch on the subject of menu usability and accessibility. We won’t go into styling menus yet, but this article will lay the foundations.
the HTML5 element
HTML5 defines aelement that can be used to contain the primary navigation of a website, be it a list of links or a form element such as a search box. This is a good idea. Previously, we would have contained the navigation block inside something like
. While this works fine for styling purposes, it is a
, and therefore semantically anonymous. The element provides a consistent way to unambiguously define the primary navigation areas. This is good for both search engine optimization and for visually impaired users. A screen reader user can more easily find the navigation area if it is clearly signposted (this does depend on whether the screen reader supports the element, so it might be a way off yet). A navigation block would look something like this:
Bear in mind thatshould only be used for the main navigation elements, not for advertising links at the bottom of the page, or for a secondary navigation relating to a small part of the page.
Your main HTML menu tools: links, anchors and lists
There are several different types of menu and navigation idioms to consider in HTML, all connected closely with
If you haven’t yet read the HTML Links and HTML Lists articles, you should. They contain lots of basic information that will help you understand this tutorial.
Anchors/links do not just become menus on their own; you must structure and style them to let both the browser and your users know that their function is as a navigation menu, not just a set of random links. HTML lists are quite handy for this purpose. If the order of the pages is not important you can use an unordered list. However, if the order in which the visitors go through all the documents is important then you should use an ordered list.
Usingand lists to create menus works well for several reasons:
You nest lists by embedding the nested list inside the
The need for flexibility
The menu of a site is unlikely to stay the same for very long — sites tend to grow and change as functionality is added and the user base grows, so you should create menus with scope for menu items to be added and removed as the site progresses, and for menus to be translated into different languages (so links will change in length). Also, you may find yourself working on sites where the HTML for menus is created dynamically using server-side languages rather than with static HTML. This does not, however, mean that knowing HTML will become obsolete; it will actually become more important, as this knowledge will still be needed to create HTML templates for the server-side script to populate.
Types of menus
There are several types of menus you will be called upon to create in HTML as you work on different websites. Most of these can be created with lists, although sometimes interface restrictions force you to use something different (more on that later). The list-based menus you will be likely to create are as follows:
In-page navigation (table of contents)
We’ve already covered this to a certain degree in the tutorial about links, but here’s a more in-depth description of what in-page navigation means and what you need to make it work. Each menu link looks like this:
1 attribute points to a corresponding anchor (the target)further down the page via the anchor’s
2 attribute value, preceded by a hash symbol (#). That anchor looks like this:
Each section of the page also has a “Back to menu” link that works in the same way, but points back to the menu instead. Technically, this is all you need to make this kind of navigation work; however, there is an annoying bug in Internet Explorer that forces you do to a bit more work.
You can try out this bug for yourself:
The way around this is terribly confusing and deals with a special property of Internet Explorer called
Having to do this is annoying, but it also helps you if you want to style the sections differently — you can’t add styling to a whole section unless you wrap it in an appropriate block level element.
Note that keyboard navigation around links in Opera works slightly differently — try looking at the above example in Opera, then hold down Shift and use the arrow keys to navigate around links (it also works on form elements). This is called spatial navigation.
Site navigation is most probably the most common menu type you’ll need to create. It is a menu of a site or a subset of it, showing both the options visitors can choose from and the hierarchy of the site. Lists are perfect for this purpose.
Providing visitors with a “You are here” feeling
One golden rule of web development and navigation is that the current document should never link to itself, and its link should be visibly different from the other entries in the menu. This is important as it gives the visitors something to hold on to and tells them where they are on their journey through your site. There are edge cases like web applications, permalinks in blogs, and so-called "one page websites", but in most cases a link to the document you are already viewing is redundant and confusing to the visitor.
In HTML links, we saw that a link is an agreement and a liability: you offer visitors a way to reach more information, but you must be careful — you’ll lose credibility and trust if that link doesn’t give the users what they want, or if it results in unexpected behaviour. If you offer, for example, a link that points to the current document, activating it will reload the document. This is something users don’t expect, and results in confusion and frustration.
This is why the current page should never be linked to from the menu. You could remove it altogether or, even better, highlight it (e.g., by surrounding it with a
How many options should you give users at one time?
Another issue to consider is how many options to give visitors at once. A lot of menus you see on the web try to make sure that every page in the site can be accessed from one single menu. This is where scripting and CSS trickery comes in — you can make the menu more manageable by hiding certain parts until users select certain areas (rollover menus, as they are sometimes called). This is clever from a technical point of view, but there are several issues with this approach:
It is up to you how many items you put into a menu — different designs call for different choices — but if in doubt, you should try cutting your menus down to only the links to the main sections of the site. You can always provide further submenus where appropriate.
Contextual menus are links that build on the content of the current document and offer more information related to the current page you are on. A classic example is the “Related articles” links you often see at the bottom of news articles, as shown in Figure 1.
Figure 1: An example of a contextual menu in a news article, offering related news items at the bottom.
This is a slightly different thing from context menus in software user interfaces, which offer different options depending on where they are accessed (like the right-click or Ctrl+click menus you find in desktop applications that offer specific options depending on where the mouse pointer is).
Contextual menus on websites are a great way to promote content on other parts of the site; in terms of HTML they are just another list of links.
Sitemaps are what you might expect: maps of all the different pages of your site (or the main sections of very large sites). They allow your site’s visitors to get a glimpse of the overall structure of your site, and quickly go anywhere they want, even if the page they need is deep within your page hierarchy.
Both sitemaps and site searches are a great way of offering visitors a fallback option when they are lost or to offer quick access for those who are in a hurry. From an HTML point of view they could either be one massive nested list full of links or, in the case of very large sites, section headings with nested links of section-specific hierarchies, or even search forms for each of the sections.
Pagination is necessary when you have to offer a way to navigate through large documents split into separate pages. You’ll find pagination in large image archives or search result pages, for example Google or Yahoo search.
Pagination is different from other types of navigation because it does normally link back to the same document, but results in more options or further information being displayed. Some examples of pagination are shown in Figure 2:
Figure 2: Pagination menus allow visitors to go through large sets of data without losing track of where they are.
The HTML is nothing ground-breaking. Once again, you offer a list of links with the current link (indicating which chunk of data is shown and how far down in the pagination you are) being highlighted (e.g., with a
The main difference from site navigation is that there is a lot of programming logic going on with pagination. Depending on where you are in the whole data set you may need to show or hide the previous, next, first, and last links. If you have massive amounts of information to navigate through, you will also want to offer links to landmarks like 0-100 results, 101-200 results, etc. This is why you are not very likely to hard-code menus like these in HTML, but create them on the server-side instead. This does not change the rules, however; the current chunk still should not link to itself, and you shouldn’t offer links that lead nowhere.
When lists are not enough — image maps and forms
In most cases an ordered or unordered list is a sufficient HTML construct for menus, especially as the logical order and nesting also allows for styling with CSS very nicely. There are, however, some situations that may require different design techniques.
Creating hotspots with image maps
One technique is to use a client-side image map. Image maps turn an image into a menu by turning sections of the images into interactive areas that you can link to different documents. For example, using an image map, a user could navigate by clicking the different sections of the triangle, as shown in Figure 3.
Figure 3: By defining a map with area elements you can turn parts of an image into interactive links.
You can turn any image into a menu by defining a map with different areas (also called hotspots). You give the map a
7 attribute and connect the image and the map using the
8 attribute on the
9 element. The code in our example looks like this:
Note that this works exactly like in-page links, which means that you need to precede the value of the
8 attribute with a hash.
Each area has several attributes:
Image maps are not much fun to define and type in as HTML, which is why image manipulation tools like Adobe Image Ready or Fireworks offer an option to create them visually (they generate the HTML for you).
Saving screen space and preventing link overload with forms
Another technique you can employ is to use a form control for navigation. For example, you could use a
8 element menus to offer more options. Visitors will be able to use them, but machines like search engine robots don’t need to know they exist.
Where to put the menu, and offering options to skip it
One last thing to mention about HTML menus is that the placement of the menu plays a large role. Consider visitors who have no scrolling mechanism or who might rely on keyboard navigation to find their way around your site. The first thing they’ll encounter when they load the document is its location and the title; next the document gets read top to bottom, stopping at each link to ask the visitor whether they want to follow the link. Other options are to get a list of all the links, or to jump from heading to heading.
If the menu is at the top of document, it will be the first thing the user will encounter, and having to skip through 15 or 20 links before they get to any actual content could be annoying. There are two workarounds available. First, you could put the menu after the main content of the document in the HTML source (you can still place it at the top the screen using CSS if you wish). Second, you could offer a skip link. Skip links are simply links placed before the main menu that link to the start of the content, allowing the visitor to skip over the menu and get to the content immediately. You can add another “Go to menu” link at the end of the document to make it easy to get back up to the top. Skip links are not only useful for users with disabilities, but they make life easier when you navigate a site on a mobile device with a small screen.
There are many ways to construct navigation menus, but no real standards — either official or de facto — for doing so. The best way to see what works and what doesn’t is to visit as many sites as possible and to note, from a user standpoint, how they provide navigation functionality. Then, either emulate menus you like, or strike out and create your own. Your menu design might be the Next Big Thing!
How to add menu in HTML?
Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.
How do you display menus in HTML?
HTML <menu> Tag The <menu> tag defines a list/menu of commands. The <menu> tag is used for context menus, toolbars and for listing form controls and commands.
How do I create a bar menu in HTML?
Using these steps, we can easily create the Navigation bar..
Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to make a Navigation Bar..
Step 2: Now, we have to define the <nav> tag in the <body> tag where we want to make the bar..
What is a menu in coding?
A menu is a set of options presented to the user of a computer application to help them find information or execute a function. Menus are common in GUIs provided in OSes such as Windows and macOS.