Turn WordPress Posts into a Navigation Menu or Social Bar
Last updated: August 2026
This isn’t a menu plugin — it’s regular WordPress posts. Give each post a title (the label), a featured image (the icon), and a custom field named NAV_URL (the destination). Put them all in one category, filter a Swiffle Grid block by that category, set the click action to Navigate URL, and you’ve got a fully styled menu — round the images, size them, center them, or let them scroll. Swap the category for your social profiles and the exact same setup becomes a social bar.
Step 1 — Create a category and enable Custom Fields
Start by creating a post category dedicated to this menu or social bar (for example « Main Menu » or « Social Links »). Custom fields aren’t shown by default in the block editor, so before creating your items, open any post, click the three-dot Options menu in the top right, open Preferences, and switch on Custom fields under Advanced. WordPress reloads the editor once you confirm.
Preferences → Advanced → Custom fields.
Step 2 — Create one post per menu item
For each entry in your menu (or each social profile), create a new post: the title becomes the label, the featured image becomes the icon, and the destination link goes in a custom field named exactly NAV_URL. Assign the post to the category you created in Step 1. Repeat for every item.
One custom field, always named NAV_URL, holding the link for that item.
Step 3 — Add a Swiffle Grid block and filter by category
On the page where you want the menu to appear (Gutenberg or Elementor both work the same way), add a Swiffle Grid block and filter it to your dedicated category. Adjust card size, spacing, and layout however you like — this is what turns a plain list of posts into a styled bar.
Filtering the block to the category holding your menu items.
Step 4 — Set the click action to Navigate URL
In the block’s Actions settings, set Card front click/tap action to Navigate URL. Clicking or tapping a card now opens whatever link is stored in that post’s NAV_URL field — that’s what makes it behave like a real menu.
Navigate URL sends the click to the post’s NAV_URL field.
ℹ️ You can also copy the code from the block’s Embed code tab and place it on a non-WordPress page. Just remember to authorize the external URL under Swiffle Grid → URLs allowed to embed first. See the Admin Setup Reference for details.
Result
Your menu (or social bar) is now live wherever you placed the block — round the images, resize them, center them, or let the row scroll to fit your design. Want a second bar for something else? Create another category, repeat the same four steps, and add a second Swiffle Grid block filtered to it — no menu plugin required either way.
The finished bar — regular WordPress posts, styled as clickable icons.