Link a menu item to a section of your homepage

Make a menu item scroll to a section on your homepage, such as About or Contact, by giving the section an ID and adding an anchor link.

On this page
  1. Step 1: give the section an ID
  2. Step 2: add the menu item
  3. How anchor links behave
  4. If the link does not scroll anywhere
  5. Linking from inside a page

A one-page site often has a menu like Work, About and Contact where each item scrolls down the homepage instead of opening another page. FolioPage does this with anchor links: you give a section an ID, then add a menu item that points to # followed by that ID. It takes two short steps.

Step 1: give the section an ID

  1. Open your homepage in the page editor.
  2. Hover the section you want to link to and click its gear icon to open its options.
  3. On the General tab, enter a Section ID, for example contact.

A few rules for the ID:

  • Use lowercase letters, numbers and hyphens. Spaces are turned into hyphens for you, and anything else is dropped.
  • It cannot start with a number or a hyphen.
  • Each ID must be unique on the page. If you reuse one, the field shows an error and the value is not saved until you change it.

Pick names that describe the content (work, about, contact) so they are easy to remember when you build the menu.

The Section ID field at the top of the Section options panel
The Section ID field at the top of the Section options panel

Step 2: add the menu item

  1. Choose Navigation in the sidebar and click Add nav item.
  2. Enter a Label, for example Contact.
  3. Under Link, choose Anchor and enter #contact (the # is added for you if you forget it).
  4. Click Add.

Repeat for each section you want in the menu. To reorder the items, drag them in the list; see build your site menu.

  • On the homepage, clicking the item scrolls smoothly to the section. If your header is sticky, the scroll stops just below it so the section's heading is not hidden.
  • On any other page, clicking the item takes the visitor to the homepage and then scrolls to the section. You do not need separate menus for the homepage and the rest of the site.
  • Anchor links point to the homepage only. To send visitors to a different page, use the Page link type instead.

Tip: You can mix link types freely. A typical portfolio menu has a few anchors for the homepage sections plus a Page or App item for the portfolio or blog.

  • Check that the Section ID on the section and the text after # in the menu item match exactly, including hyphens.
  • Make sure the section is on the homepage, not on another page.
  • The section must not be hidden. A section in draft mode is left out of the live page, so there is nothing to scroll to.
  • Remember to click Update live site after changing either the section or the menu; see why your changes do not show on the live site yet.

Linking from inside a page

Anchors are not just for the menu. A button or link inside a homepage section can use the same #contact address to jump down the page, and you can share https://yourname.folio.page/#contact to send someone straight to that section.

Related articles