Skip to main content
All navigation links in your portfolio — both the sticky header navbar and the footer — are driven by a single config file: src/data/config/menu.json. You define two named menus inside it (main and footer), each as a simple array of link objects. Changing the order of items, adding new pages, or removing links never requires touching a component; you only edit the JSON.

Where the Menu File Lives


The Two Menus

menu.json contains exactly two top-level keys: Both follow the same item shape, with one optional extra field available in main.
Each item in either array is a plain object with the following fields:
Every id must be unique across the entire file. A good convention is to prefix header items with nav- and footer items with ft- to avoid collisions.

The isCta Property

Setting isCta: true on a main menu item gives it a button style (filled background, border radius, accent color) instead of a plain text link. Use it for your primary call-to-action — typically a “Contact” or “Hire me” link.
Apply isCta to only one item at a time. Multiple styled buttons in the navbar compete visually and dilute the call-to-action signal.

Managing Menu Items

Adding a New Item

Copy any existing object in the array and update its id, label, and href. Make sure the id is unique.

Removing an Item

Delete the object from the array entirely. Leave no trailing commas.

Reordering Items

Rearrange the objects within the array. The header renders items left-to-right in array order; the footer renders them in the same sequence.

Linking to External Pages

Set href to any fully qualified URL to link outside your portfolio. The template renders external links as standard anchor tags.
External links in the footer are common for pointing to social profiles. However, your social icons in the footer (Twitter/X, LinkedIn, GitHub profile icons) are configured separately in src/data/config/site.json under footer.data.social, not in menu.json.

Annotated Full Example


Applying Your Changes

1

Open menu.json

Navigate to src/data/config/menu.json in your editor.
2

Edit the arrays

Add, remove, or reorder items in main and/or footer as needed.
3

Validate JSON

Ensure the file is valid JSON before saving — trailing commas and missing brackets are the most common mistakes.
4

Rebuild or save via Studio

Run your dev server or production build to apply the changes.
After editing menu.json, the site must be rebuilt (or the dev server must hot-reload the file) for changes to appear. If you’re using the Studio editor, saving the file triggers a live preview refresh automatically.