Navigation is the scaffolding of a website. Clear menus help visitors find what they came for, reduce bounce rate, improve SEO by giving search engines a map of the site, and nudge users toward the pages that actually make money. WordPress has two menu systems — classic and block — and which one you use depends on your theme. This guide covers both, explains when each is appropriate, walks through building dropdowns and footer menus, and covers UK-specific conventions (legal links, cookie banners, accessibility) that most WordPress guides miss.
Why navigation matters · The two menu systems in WordPress · Creating a classic menu · Creating dropdown sub-menus · Understanding menu locations · Using the Navigation block in block themes · Best practices for UK business sites · Mobile and touch navigation · Accessibility in menus · Frequently asked questions
Visitors decide whether to stay on your site within the first five seconds. Navigation is the first thing they look at after the headline. A confused menu sends them back to Google; a clear menu sends them deeper into the site.
Four specific reasons to get navigation right:
WordPress has two different ways of creating menus, and which one you see depends on your active theme.
Classic themes use Appearance > Menus. This was the only system for over a decade. Menus are created in a dedicated screen; a checkbox at the bottom assigns the menu to a theme location (Primary, Header, Footer, Social, Sidebar).
Block themes use the Navigation block inside the Full Site Editor (Appearance > Editor). Menus are edited visually in the header/footer templates, directly in the block editor.
If your Appearance sub-menu shows Editor, you have a block theme. If it shows Menus and Customize, you have a classic theme. The default Twenty Twenty-Five and every recent WordPress default is a block theme. Popular themes like Astra, Kadence, GeneratePress and Blocksy are available in both block and classic versions.
Both systems cover the same use cases (pages, posts, custom links, categories, dropdowns, multiple menu locations). The interface differs.
Steps for a classic theme.
Appearance > Menus.
Type a name (e.g. "Main Menu", "Primary Navigation", "Footer Menu"), click Create Menu. The name is internal; visitors do not see it.
Panels on the left for Pages, Posts, Custom Links and Categories. Tick items, click Add to Menu. They appear on the right.
Drag and drop. Items at the top appear leftmost in a horizontal menu, or topmost in a vertical one.
Scroll to Menu Settings, tick a location (Primary, Footer, etc.). Themes usually offer 2–4 locations. The checkboxes tell WordPress which menu appears where.
Click Save Menu. Visit the site to confirm.
Custom Links panel on the left. Type a URL and label text, click Add to Menu. Useful for linking to external URLs (Facebook page, booking system, e-commerce shop on a subdomain) or anchors within a page (#contact).
Grouping related pages under a parent.
After adding items, drag a child item slightly to the right, underneath the parent. The item indents, and WordPress labels it "sub item". Save the menu. On the front end, hovering (desktop) or tapping (mobile) the parent reveals the sub-items.
One level of dropdown is usually enough. Two-level dropdowns (sub-items with their own sub-items) are technically possible but rarely usable on mobile — stick to one level.
Select a Navigation link, click the three-dot options in the toolbar, choose Add submenu. The item becomes a parent, and you can add child links inside it.
A UK web design agency might have:
Themes define menu locations — designated areas where a menu can be assigned. Typical locations:
The locations available depend on your theme. A minimal theme might offer only Primary and Footer; a complex theme might offer eight or ten locations.
In classic themes, assign from Appearance > Menus > Menu Settings or the Manage Locations tab. In block themes, edit the relevant template part (Header, Footer) in the Full Site Editor.
For block themes such as Twenty Twenty-Five, the Navigation block handles menus directly in the Full Site Editor.
Appearance > Editor. Select the Header template part (usually the top section of the page outline).
The block offers styles for layout (horizontal, vertical), colour, typography and spacing. Changes apply globally to the menu. For per-item styling (e.g. a button-style "Get a quote"), use a Button block inside the Navigation block, or style via custom CSS.
Click + inside the Navigation block, select Search. Gives visitors an inline search box without a separate widget.
Every extra top-level link dilutes attention. Pages that do not fit — team bios, detailed case studies, FAQ, sitemap — belong under dropdowns or in the footer.
Home, About, Services, Blog, Contact are boring but universal. Clever labels ("Our Magic", "The Lab", "Mission Control") make visitors think. Thinking is bad. Boring is good.
The final menu item, styled as a button, draws the eye. Common CTAs for UK businesses:
Eye-tracking studies show visitors pay most attention to the first and last items. Place the most important pages (usually Services and Contact) in those positions.
UK legal obligations mean every site needs Privacy Policy, Cookie Policy and typically Terms and Conditions. These belong in the footer, not the primary menu.
If Services has five sub-pages, the dropdown should show those five. If About has pages for Team, Careers and Press, put them under About, not scattered across the main menu.
Your Contact page is usually the most commercially important page on the site. Make it reachable from every other page through the main menu, regardless of what else is in the menu.
Over 60% of UK web traffic is mobile. Every menu design choice needs to work on a 390-pixel-wide screen.
Responsive themes automatically convert the desktop menu into a hamburger icon (three horizontal lines) on small screens. Tap the icon and the menu slides out as a full-screen or side-panel overlay.
Test by opening your site on an actual phone. Browser DevTools device emulation is a reasonable proxy but nothing beats a real device.
A sticky header (menu that stays visible while scrolling) helps on long pages — visitors can always reach the menu. On mobile it consumes vertical space. A common compromise: sticky on desktop, non-sticky on mobile, or a condensed sticky version on mobile that shows only the logo and hamburger.
For UK public-sector sites, accessibility is mandatory under the Public Sector Bodies Accessibility Regulations 2018 (WCAG 2.2 AA). For commercial sites, the Equality Act 2010 imposes a general duty not to discriminate.
Navigation-specific accessibility points:
<nav> and <ul> markup. WordPress handles this automatically; check your theme if using a custom menu.How many menu items is too many?
5–7 top-level items is the usability sweet spot. Beyond that, visitors cannot easily scan. Group surplus items under dropdowns or move them to the footer.
Can I have different menus for logged-in and logged-out users?
Yes, with a plugin. Nav Menu Roles (free) lets you hide menu items based on user role. Useful for membership sites, client portals or WooCommerce My Account.
How do I add an icon to a menu item?
Two options. (1) In block themes, add an Icon block alongside the text. (2) In classic themes, use a plugin like Menu Icons that adds an icon picker to each menu item.
Why does my menu look different on the front end than in the editor?
The editor shows the raw structure; the theme applies styling (colours, spacing, hover effects). If a change does not appear at all, clear your caches (LiteSpeed Cache, browser, CDN).
Can I have a menu item link to an anchor on the same page?
Yes. Use a Custom Link with URL /#section-id and name it appropriately. The section-id needs to match an HTML id attribute on the target section.
How do I add a search bar to the menu?
In block themes, insert a Search block inside the Navigation block. In classic themes, use a widget-based search combined with a menu plugin that exposes widget areas as menu items.
What about mega menus?
Mega menus (large multi-column dropdowns with images) need a dedicated plugin: Max Mega Menu (free), Uber Menu (premium) or features in commercial themes like Astra Pro. Useful for large shops with many category groups, overkill for most small business sites.
Do I need separate menus for header and footer?
Yes. The header menu is for primary navigation (conversion-oriented pages); the footer menu is for secondary links (legal, support, company info). Running the same menu in both dilutes both.
How do I make a menu item a button?
Classic menus: add a CSS class to the menu item via Screen Options > CSS Classes, then style that class in additional CSS. Block themes: insert a Button block directly inside the Navigation block — no CSS needed.
Can I schedule menu changes?
Not natively. Workaround: create the new menu in a staging environment using Plesk WordPress Toolkit, test it, and push to production at the scheduled time. Or use a plugin like WP Scheduled Posts extended for menus.
Launch your WordPress site on smartxhosting.uk
UK hosting with the Plesk WordPress Toolkit, LiteSpeed Cache, Redis object caching, free Let’s Encrypt SSL, free CDN and daily backups — from £2/month.
View WordPress hosting plans →