Navigation & sitemap wireframe – medium fidelity. A generic site's menu system for desktop & mobile. Greyscale, no brand styling.
·
Style guide
Wireframe kit · navigation
Navigation & sitemap
A realistic, generic navigation system to align on before designing: a utility (secondary) bar, a primary nav with dropdowns and a mega-menu, a persistent call-to-action, plus the full sitemap and the mobile hamburger pattern. Swap the placeholder labels for the real site structure.
1 · Desktop
Two menu patterns
nav-desktop
Two ways to build the primary nav. Both follow the same rule – any item with a dropdown must lead with an Overview landing page. Shown here for About and Services.
Option 1 · Traditional dropdowns – a single vertical list per item
FeaturedPromo card or spotlight inside the mega-menu.Learn more
caret = has a dropdownlanding section overview (first dropdown item)new new page/section external link – e.g. "Client portal" above (opens new tab)
Dropdowns are pinned open here for review. Live, only one opens at a time, on hover (desktop) or tap (touch); the CTA stays visible on every page. Choose Option 1 for simple sites, Option 2 when a section has many children or needs promotion.
Rule: never let a dropdown be the only route to a section's own page.Never have a main menu item (e.g. About) whose dropdown is the only way to reach the About content. When a menu item is both a link and a dropdown, a meaningful share of users – in usability testing, often around one in five – never realise the parent is its own page and only ever see the child items.Always include a dedicated Overview page, and repeat it as the first link in the dropdown, so critical content is never missed. It also improves accessibility and strengthens our internal linking and SEO footprint.Desktop only. This rule is not needed on mobile: the hamburger accordion lets users tap the parent label to open its own page, with a separate chevron to expand the child items, so the parent is never hidden.
Open – accordion, one section expanded, utility split out, CTA pinned
On mobile the whole menu collapses to a hamburger: primary items become a stacked accordion (closed by default), utility items sit lower and styled distinctly, and the primary CTA stays pinned as a full-width button. The parent label (e.g. About) links to its own page, with a separate chevron to expand the children – so the desktop "Overview as first dropdown item" rule is not needed here.
3 · Full sitemap
Every page on one view
sitemap
Primary navigation
Home
Hero / value proposition
Key sections / feeds
Primary CTA
About
Overviewlanding
Our team
Careers new
Services
Overviewlanding
Service one
Service two
Service three
Industries
Work
Overviewlanding
Case study (detail)
Sectors / filters
Resources
Overviewlanding
Blog / articles
Guides & downloads
Case studies
FAQ
Events new
Pricing
Flat top-level page (no dropdown)
Plans / tiers
News
Flat top-level page (no dropdown)
Article index / feed
Article (detail)
Contact
Enquiry form (routed)
Locations & map
Book / demo CTA
Pricing and News sit in the main menu as flat top-level links (no dropdown, so no Overview needed). Only items with children get a dropdown and an Overview landing page.
Utility / secondary & system pages
Utility bar
Search
Support / Help centre
Locations
Language switch
Account
Sign in / register
Dashboard new
Profile & settings
Commerce (optional)
Cart
Checkout
Order confirmation
System / legal
Search results
404 / error
Privacy · Terms
Client portal
landing section overview (first item in a dropdown) caret = dropdownnew new page/section external system (new tab)Dashed columns = utility / secondary
There's no "Home" item on some sites – the logo returns home. Keep the primary nav short (5–7 items) and focused; push everyday and account items into the utility bar. FAQs can sit at the foot of key pages rather than a single FAQ page.