Creating the website navigation menu

We all need landmarks in the digital world, right? When talking about the ecosystem of a website, the navigation menu can be considered a comrade. In the end, it is just a map that guides you to dig deeper and fully enjoy the website.

It may sound naive, but it is what makes users leave a website without hesitation. A bad navigation can bring frustrations and create an illogical flow. The good news is that WordPress includes a reliable menu manager tool to keep people on track and convince them to come back.

Who doesn't want such a behavior, right?

First, let's learn about what makes a navigation menu right and how it can help you get the desired results, and then we will move to the step-by-step tutorial on how you can set yours up in no time.

Pixelgrade LT is built on the Anima block theme and uses the WordPress Site Editor, so you create your menu by editing the Navigation block that lives in your theme's Header — no separate "Menus" screen required.

Note: This guide applies to every Pixelgrade LT site — they're all built on Anima and managed through Pixelgrade Assistant, so the steps below work the same whatever LT design you chose.

Step 1 – Plan your menu structure

Let's start with a definition to get on the same page. A navigation menu is a set of links that sit at the top of your website (in the header). Its role is to link to the other pages of your website.

The first step to ensuring that your navigation menu can help you accomplish your goals is to decide the structure and what pages need to be visible (almost) everywhere people visit your website. Think of it as something similar to a sitemap—which is simply a list or diagram of all the pages of your website and how they connect.

Of course, the sitemap will go deeper since every page has other pages it links to. For the purpose of building the main navigation, creating a visual representation can be helpful. You can also do it in the form of bullet points on a piece of paper; no need to go fancier.

The key is to analyze each link you add to the main navigation and determine what goal it will help you complete. It can be to help people learn more about you (like an About page), get in touch with you (through a Contact page), or see a list with all your services, products, or educational resources (like blog posts, ebooks, and so on).

There are also other places where you can add navigation menus. A common place is to add links in the footer. If you want to learn from our experience of recreating our website's sitemap and see how we decided what links deserve the top spot and what should stay in the footer, I highly recommend reading this article.

When it comes to the top navigation, there are a few important things to look out for:

• The magical number seven (plus or minus two) – this is because short-term memory holds only seven items. It's a fact, not wishful thinking. With fewer menu items, your visitors' eyes are less likely to scan past important items. Every time you remove a menu item, the remaining items become more prominent. Challenge yourself to limit your navigation to five items.
• Avoid drop-down menus – by not using drop-down style menus, you reduce the possibilities for website visitors to miss relevant content. Keep it simple.
• The order of your menu items matters – the most important items are those at the beginning and the end of your navigation because this is where most visitors' attention goes to.

These are all the essential things you need to know before you start actually creating your menu. If, however, you want to go a bit in-depth, I recommend reading this article that provides extra tips on things like naming for each item, SEO friendliness, and more.

—

Step 2 – Open the Site Editor

1. In your WordPress dashboard, go to Appearance → Editor. This opens the Site Editor, where you design every part of your site.
2. In the left panel, click Navigation. This shows the menu (or menus) that already exist in your theme — your starter content usually ships with one ready to edit.

Prefer to edit it in place? You can also open your theme's Header template part (left panel → Patterns → Template Parts → Header, or just click the header at the top of the canvas) and select the Navigation block directly. Both routes edit the same menu.

—

Step 3 – Add items to your menu

With the Navigation block selected, you can add links one by one.

1. Click the + (Add) button inside the menu, or open the block's List View to see every item.
2. Start typing a page name, or paste a web address. There are several types of menu items available, such as:

• Pages: Adds a link to another page on your site.
• Posts: Links directly to a blog post on your site.
• Custom Links: Adds a custom URL linking to an internal or external site (e.g., social media channel).
• Categories: Shows a feed of blog posts from a given category.
• Tags: Shows a feed of blog posts from a given tag.

1. Pick the result you want and it's added to the menu instantly.

When you're happy, click Save in the top-right corner to publish your changes.

—

Step 4 – Reorder and create sub-menus

With all the menu items in place, you can change the order and the placement of the menu items by simply using the drag-and-drop gesture.

1. Open the block's List View (the simplest way to see the whole structure).
2. Drag and drop items up or down to change their order.
3. To create a drop-down, drag an item onto another item so it nests underneath it, or add a Submenu item and place links inside it. The parent then reveals its children on hover or tap.

Feel free to play around and find the right scheme for your particular needs, then Save again.

—

Step 5 – Style and position the menu

Because your menu is a real block, you change how it looks visually — no code needed:

• Colors and fonts: select the Navigation block and use the settings panel on the right, or set them site-wide in Style Manager. Open Style Manager with the Open Style Manager action in Appearance → Pixelgrade Design, or from inside the Site Editor under Styles. Style Manager's Color System section controls your site's colors and its Typography section controls your fonts — the header and menu pick these up automatically, so you don't need custom CSS to restyle your menu.
• Mobile / overlay menu: the Navigation block can collapse into a tap-to-open menu on small screens. Select the block and look for the Overlay Menu option in its settings (Off, Mobile, or Always) to control when the mobile menu kicks in.

• Position in the header: the menu sits inside your Header template part, alongside your logo. Drag it left or right within the header in the Site Editor to reposition it. Changes you make to the Header apply across your whole site.

—

Footer and other menus

You can add navigation anywhere a Navigation block can go. To add links in the footer, edit your theme's Footer template part in the Site Editor and add a Navigation block (or a simple list of links) there. The same build-and-arrange steps from above apply.

—

Troubleshooting

My menu disappears on inner pages (it only shows on the homepage). This usually means a particular page or template isn't using the same Header. In the Site Editor, open the affected template (left panel → Templates) and confirm it includes your Header template part. If your site was set up from a Pixelgrade LT starter and the header is missing on some templates, reach out via the Help tab in Appearance → Pixelgrade Design — this is a template setup issue, not a menu mistake.

I can't change the menu color / font. Don't edit CSS for this. Select the Navigation block and use its settings, or open Style Manager (the Open Style Manager action in Appearance → Pixelgrade Design) and use its Color System and Typography sections to set colors and fonts across your whole site at once.

The mobile menu overlaps or won't open. Check the Overlay menu setting on the Navigation block (see Step 5). If items overlap the close button, simplify the menu (fewer items) and re-save.

—

FAQ

How do I create a parent item that isn't clickable but still opens a drop-down? Add a Submenu item instead of a plain link, and leave the parent's URL empty. The parent then acts only as a label that reveals its child links, rather than a link of its own.

Can I show a different menu on different pages (for example, a different menu on the Shop page)? Yes — the Navigation block shows the same header menu site-wide by default, but you can give a specific page its own template with its own header and menu, all built into WordPress with no extra plugin. See our guide on having different menus on different pages.

Can I show some menu items only to logged-in (or logged-out) visitors? The built-in Navigation block doesn't include per-item visibility by logged-in status. This is an advanced feature that needs a dedicated plugin, and behavior can vary on block themes. If you need it (for example, hiding a Log In link from people who are already logged in), reach out via the Help tab and we'll point you to a current, compatible approach.

—

Looking for help designing the rest of your site? Everything — colors, fonts, spacing, starter content, page patterns, and documentation — lives in Appearance → Pixelgrade Design, the Pixelgrade Assistant hub.