Utility navigation: login, basket and search, out of the way

Key takeaways

Utility navigation is the small set of tool links, such as login, basket, search, language and phone, that visitors use to do something rather than to learn about the business. Put it at the top right of the header, smaller than the main menu, and keep it identical on every page. Moving tools here keeps the main menu about the offer.

• Utility links are tools: login, basket, search, language, phone.
• Top right of the header is where visitors look for them.
• Style them smaller than main menu items, but still easy to hit.
• Use icons with text labels, not icons alone.

What is utility navigation?

Utility navigation is a secondary menu of tools and account functions that help visitors interact with a site, rather than browse its content. Nielsen Norman Group defines it as links to tools such as search, account login, basket and language settings, and notes users expect it in the top right corner.

• How clear website navigation improves user experience
• Primary vs secondary navigation: what goes where

What belongs in utility navigation?

Include tools a meaningful share of visitors use, and nothing that describes the business. A few items is enough.

• Login or account for customers and clients.
• Basket or cart on e-commerce sites.
• Search on sites large enough to need it.
• Language or region switcher.
• Phone number, if calls matter.
• Order tracking for retailers.

• Language switchers: let visitors change language easily
• Navigation for returning customers: logins and reorders

How should utility links look?

Smaller and quieter than the main menu, but still clearly clickable and large enough to hit. Pair icons with text, such as a basket icon with 'Basket (2)', because icon-only links are easy to misread. On phones, keep the basket and search visible beside the menu icon.

• Fitts's law: why bigger, closer links are easier to use

Should utility links appear on phones?

The most used ones should. Basket and search usually sit beside the menu icon; login and language can move into the menu. Decide from analytics which tools mobile visitors use most and keep those visible.

What are the common mistakes?

The common mistakes are mixing tools into the main menu, hiding login behind 'More', showing icon-only links with no names for screen readers, and a basket that disappears on some pages. WCAG 2.2 success criterion 3.2.3 asks for repeated navigation to stay in the same order across pages.

• Accessible navigation: clearer for every visitor

What does this look like in practice?

A pattern we see: an accountancy firm's client portal link sits under 'Resources', so clients email to ask where to upload documents. Moving 'Client login' to the top right of every page removes the question.

• See client work
• Website Design & Development for UK businesses

Utility navigation checklist

• Top right of the header on every page.
• Only tools: login, basket, search, language, phone.
• Icons always paired with text.
• Most used tools visible on phones.
• Same order on every page.

• Does your website need a search bar?
• Sticky headers: helpful or in the way?

Next step

Ask your customer service team which tool customers most often cannot find.