Navigation

Quick links

A clear and well-structured navigation system is fundamental to delivering a smooth, intuitive user experience. It enables users to orient themselves within the site, find what they’re looking for with ease, and understand how content is organised. This section defines how the primary navigation, footer, and other structural elements are designed and used across the site, ensuring consistency and clarity in every experience.

Primary Navigation

The main navigation sits at the top of every page and is the user’s primary tool for exploring the website. It must remain uncluttered, consistent across all pages, and accessible on all devices.

Structure and Order

  • The navigation menu is flat and no more than two levels deep to avoid overwhelming users.
  • Menu items are ordered according to user needs and business priorities, placing high-demand pages (e.g. “Solutions”, “Insights”) first.
  • Logical grouping is key, content should be categorised in a way that reflects how users mentally group information.

Naming Conventions

  • Menu labels must be short, clear, and action-oriented where appropriate.
  • Use plain language, avoid jargon or internal terms. For example, use “Knowledge Hub” instead of “Resources.”
  • Capitalise the first letter of each word (title case) for all menu items.

Hover and Focus Effects

  • Hover states should provide a subtle colour change or underline effect to indicate interactivity without disrupting the layout.
  • Keyboard users must be able to tab through navigation items with clear focus states (e.g. a blue outline or visible indicator).
  • Dropdown menus should open on hover (desktop) and via tap (mobile) with smooth transitions.

Sticky Behaviour

  • On scroll, the main menu should remain fixed at the top of the page with reduced height, maintaining key links visible and accessible at all times.

Mobile Navigation

  • On smaller screens, the navigation adapts into a mobile-first menu pattern.
  • The menu is accessed via a hamburger icon in the top right corner.
  • Tapping the icon reveals a full-screen overlay menu with stacked links and expandable dropdowns.
  • Close button must always be visible in the top corner, and scroll locking should be in place when the menu is open.

Breadcrumbs

  • Breadcrumbs are used on deeper-level pages (typically two levels or more) to aid orientation and provide quick access to parent pages.
  • Positioned below the hero or banner, breadcrumbs reflect the site’s hierarchy and current page location.
  • They must be dynamically generated based on page structure and follow the format: Home > Section > Subsection > Current Page
  • Links in the breadcrumb must be clickable except for the last item, which is the current page.

Footer Navigation

The footer provides persistent access to utility links and secondary content. It also reinforces credibility by displaying trust-building details like contact information and legal terms.

  • The footer is divided into clear columns by theme or category (e.g. Solutions, Company, Resources).
  • It includes: contact details (office address, email, phone if applicable), quick links to key pages (e.g. Careers, Privacy Policy), social media icons linking to active intelliflo accounts (LinkedIn, Twitter/X)

Best Practices

  • Avoid overloading the footer, it should help users, not distract them.
  • Use a darker background with light text to visually anchor the end of the page.
  • Ensure all links meet contrast and accessibility standards.

Information Architecture Principles

Consistency First

  • Keep navigation structure consistent across all pages to avoid cognitive friction.
  • Avoid introducing new navigation patterns or page layouts without strong rationale.

Scannability and Clarity

  • Users scan, not read. Make sure menu items and headings are concise, predictable, and distinct.
  • Pages should deliver a clear hierarchy, from global nav to page-level headings to in-page CTAs.

Navigation Depth

  • Aim for a shallow navigation structure where most content is accessible within 2–3 clicks from the homepage.
  • Limit the number of menu items to prevent choice overload.

Other Considerations

  • Search, If implemented, search should be visible in the top navigation bar and provide predictive suggestions or filters.

Custom 404 pages should:

  • Reinforce the site’s tone of voice
  • Provide links back to the homepage or key content areas