We typically steer away from these, in order to keep the navigation as a whole clean and simple, but sometimes secondary navigation can provide great accessibility for larger, more complex websites. When absolutely necessary, a secondary navigation can be home to content that is of secondary interest to the user. Breadcrumbs help signal to a user where they are within the website, so they can navigate successfully from there. Site visitors don’t always use the “front door,” meaning they don’t always enter through the homepage and follow a hierarchical browsing pattern search engines can drop them anywhere on the site. They provide a map of how the user ended up on the current page. They typically appear horizontally, just below the navigation but above the page title.

Breadcrumbsīreadcrumbs provide a visual clue to the hierarchical structure of your website. Sometimes the navigation will collapse into a small, condensed version to allow for more screen space, but the crucial navigation links remain in view at all times. When expanded, the hamburger menu generally displays a stacked version of your main navigation.Īlso referred to as persistent headers, this common pattern keeps the horizontal navigation at the top of the screen while the user scrolls down the page. It’s a universal symbol that means “menu.” While some B2C companies use this on all views, for B2B industrial companies we recommend using this ONLY for tablet and mobile views, so that the navigation remains visible, and as clear as possible, for all visitors (who are primarily using a desktop computer anyway). The hamburger menu icon is made up of three horizontal lines that, unsurprisingly, look like a hamburger. This gives a visitor a sense of the breadth of your offerings in a single glance, and it acts as a nice visual “Table of Contents” of the content in this section of your website. With more space, you can display multiple categories, lists, short explanations, or even images. This is a dropdown menu that displays a much larger set of options spanning the whole width of the screen. Here you can list out links to all the pages within your site map in an organized set of groups. This is a handy way to hide complex lists of products or services to keep the horizontal navigation clean and simple. It’s also a great place to house your sitemap, copyright, privacy policy, and social links.

Many items in the footer navigation repeat from the main horizontal navigation or utility navigation, but users will often go directly to the footer to find things like contact information, location, careers, or customer support. Typically, utility navigation exists above the horizontal navigation, with weight to the upper right corner. They can include activities like search, login, subscribe or contact us. Links in the utility navigation are, as the name suggests, utilitarian links. It provides quick links to top-level pages, or the most important pages, and can also include crucial elements such as the search bar, CTAs (calls to action), and your logo. It’s global (located on every page) across the website. This is the most recognizable, classic type of website navigation. Here are some of the most common styles: The Horizontal Navigation Bar There are many types of website navigation. Choosing navigation styles for a B2B industrial website.

Making a contact bar website