Navigation is one of the most important parts of your website.
It helps visitors explore your blog, categories, and pages easily.
In WP Royal (Full Site Editing theme), navigation menus are created and managed using the Navigation Block inside the Site Editor.
Unlike older WordPress themes, you do not use the classic “Menus” page. Everything is visual and editable directly inside the Header.
Understanding Navigation in FSE #
In block themes like WP Royal:
- Menus are created using the Navigation block
- They are usually placed inside the Header template part
- You can visually add, remove, reorder, and style items
- Changes apply across the entire website
How to Create or Edit Navigation Menu #
Step 1: Open the Header #
- Go to Appearance → Editor
- Click Template Parts
- Select Header
You are now editing the header layout.
Step 2: Select or Add Navigation Block #
If navigation already exists:
- Click on the menu area to select the Navigation block
If it doesn’t exist:
- Click + (Add Block)
- Search for Navigation
- Insert it into the header
Step 3: Add Menu Items #
Inside the Navigation block:
- Click the + icon
- Choose what to add:
- Page
- Post
- Category
- Custom link
- Select the item
Common examples:
- Home
- About
- Blog
- Contact
- Categories
Click Save after finishing.
How to Reorder Menu Items #
- Drag items left or right
- Or use arrow controls in the block toolbar
The order you set is how visitors will see it.
How to Create Dropdown (Sub-Menu) #
To create a dropdown menu:
- Add menu items normally
- Drag one item slightly to the right under another
- It becomes a child item
Example: Blog, Technology, Business, Lifestyle
This creates a dropdown under “Blog”.
This is highly recommended for magazine-style websites.
How to Create a Category-Based Menu #
For blog and magazine websites, category navigation is very important.
Step 1: Create Categories #
- Go to Posts → Categories
- Add your main categories (Technology, Business, Lifestyle, etc.)
Step 2: Add Categories to Navigation #
- Open Header in Site Editor
- Click Navigation block
- Click +
- Search and select your category
Repeat for other categories.
You can also group them into a dropdown menu.
How to Add Social Media Icons to Navigation #
You can add social media icons using the Social Icons block.
Step 1: Open Header #
- Go to Appearance → Editor
- Open Header
Step 2: Add Social Icons Block #
- Click +
- Search for Social Icons
- Insert it into header
Step 3: Add Social Platforms #
- Click + inside Social Icons block
- Select platform (Facebook, Instagram, YouTube, etc.)
- Paste your profile URL
- Save
How to Style the Navigation Menu #
Select the Navigation block to customize:
- Font size
- Text color
- Background color
- Spacing
- Alignment (left, center, right)
- Dropdown behavior
All settings are available in the right sidebar.
Mobile Navigation #
On smaller screens:
- The menu automatically turns into a mobile menu (hamburger icon)
- Clicking it opens a menu overlay
You can adjust:
- Overlay colors
- Menu alignment
- Spacing
Always preview mobile view before saving major changes.
Important Reminders #
- Editing navigation in Header updates it everywhere.
- Always click Save after changes.
- Keep navigation clean and simple.
- Avoid too many top-level items.
- Use dropdowns when needed.
Best Practice for WP Royal Blog & Magazine Sites #
- Limit top-level items to 5–7.
- Highlight important categories.
- Use dropdowns for secondary topics.
- Avoid clutter in header.
- Add only essential social icons.
Clean navigation improves user experience and increases engagement.
