Imagine being dropped in a foreign land with no map, no compass, or no phone. That’s what it feels like for a new visitor landing on a website with poor navigation. It’s overwhelming, frustrating, and you want to leave; not the kind of impression you want to make for first time visitors.
When you think of website navigation, what comes to mind? Many people think of the navigation bar that features at the top of every website. However, navigation includes much more than this.
So, what is navigation? Website navigation is how people find their way around a website. It includes the menus and links that help visitors move from one page to another and find what they’re looking for.
Let’s explore the different types of navigation on a website.
Top menu navigation
This is the main menu that’s positioned at the top of every page. The logo is typically on the left and links to the homepage. The rest of the menu items are listed to the right. It includes the most important pages on the website; the pages you know many users will be looking for when first landing on the site. In some cases, the main menu is listed on the side of the website. However, as most people are accustomed to seeing the menu to the right of the logo, I’d argue this is the best location to place it.
Header Navigation – Cotton Loops
If you need to include a lot of items in the top menu navigation you might consider using a dropdown navigation menu. When a user hovers over one of the top-level menu items, a menu expands with more links. Smart organisation is key to an effective dropdown menu.
On mobile, it’s standard to use a hamburger menu (three lines) to include these items in the top menu navigation. Instead of listing any top-level links on the page, everything is hidden behind the button. Tapping the hamburger icon reveals the menu items.
Footer navigation
At a minimum, the website footer should include links to legal pages. But there is so much more you can include. Many people scroll down to the footer if they can’t find what they’re looking for in the top menu or within the page content itself. So be sure to include useful links that are not included in the top menu navigation. You may also add the pages included in the top menu navigation.
To make the footer easy to navigate, you can include a number of columns with subheadings above each to distinguish between different types of links e.g. ‘shop’ with links to different product categories, ‘corporate information’ with information about the company, careers, sustainability etc., ‘help’ with links to customer service, contact, my account, etc.
Footer Navigation – Cotton Loops
Footer menus can range from simple with only the most important links to complex with in-depth information. Including lots of information in the footer can help people quickly find what they’re looking for and can even boost SEO if you include the right keywords. The right approach depends on your goals and the complexity of the website.
Sidebar navigation
Sidebars are positioned on the left or right side of the page. One of the most common uses of the sidebar is on a blog. The content is on the left and the sidebar is on the right, which might include blog categories. Sidebars are also common on ecommerce websites, where filtering, categories, and advanced navigation is often placed.
Sidebar Navigation – Cotton Loops
Breadcrumb navigation
These are hierarchical sets of links that show how pages are nested within each other. Breadcrumbs are commonly used on ecommerce websites. They help users navigate a particular category they are interested in.
For example: Shop > Women > Footwear > Sandals
Breadcrumb Navigation – Cotton Loops
In conclusion, navigation is a key part of creating a user-friendly website. The more user friendly the navigation of your website is, the more time people will spend on your site and the more likely they will take action. Don’t leave your users lost in a maze, give them a map to help them navigate it.