How to Use the Menu Block in UniLink (Add Navigation to Your Bio Page)

A step-by-step guide to adding the Menu block to your UniLink page so visitors can jump between sections instantly — using anchor links, a sticky top bar, or a mobile hamburger menu — without losing their place or having to scroll through the entire page.

A long bio page without navigation is a guessing game for the visitor. They arrive, see a block near the top, and have to scroll to find whatever else you have — Shop, FAQ, Contact, About. If they scroll past it, they have to scroll back. If they are on mobile, that scrolling is even more effortful. The Menu block solves this directly: it puts a navigation bar at the top of your page with labeled links that jump the visitor to exactly the section they want, instantly. For pages with four or more distinct sections, a sticky menu is not a luxury — it is the difference between a page visitors can actually navigate and one they skim and leave because finding what they want requires too much effort.

What the Menu block does

The Menu block adds a navigation bar to your UniLink page. Each item in the menu is a label paired with either an anchor link (a jump to a specific section on the same page, using a #section-id format) or a regular URL (a link to another page or external site). Visitors click a menu item and either jump to that section instantly or navigate to the linked destination. The menu can be set to sticky, meaning it scrolls with the visitor and stays at the top of the viewport at all times, or static, meaning it stays at its position in the page layout and disappears from view when scrolled past.

On desktop, the menu renders as a horizontal top bar by default — the most familiar navigation pattern for web pages. On mobile, the menu can display as a compact horizontal bar (for short menus of three to four items) or collapse into a hamburger icon that expands into a dropdown list when tapped. The hamburger layout is the right choice for menus with five or more items, where a horizontal bar on a narrow mobile screen would either overlap or become too small to tap comfortably. The breakpoint at which the layout switches from horizontal to hamburger is configurable.

Each menu item can optionally include a small icon alongside the label — useful for visual differentiation when menu items represent distinct types of content (a shopping bag icon for Shop, an envelope icon for Contact, a star icon for Reviews). Icons are not required and work best when they reinforce obvious associations rather than replace text labels. A menu item with only an icon and no label creates accessibility problems and should be avoided unless the icon meaning is completely unambiguous — which is rarely the case across a diverse audience.

Before you start

1. List your sections and decide which need menu items: Go through your page block by block and identify the distinct sections a visitor might want to jump to. Common menu items include Shop, About, FAQ, Contact, Links, Reviews, and Blog. You do not need a menu item for every block — only for sections that are meaningful navigation destinations. If two consecutive blocks together form a "Contact" section, one menu item pointing to the first of those blocks is sufficient.
2. Assign section IDs to target blocks: For every section that will be a menu anchor destination, open that block's settings in the Dashboard and set a section ID — a short, lowercase, hyphenated identifier like shop, about, contact, or faq. This step is required before anchor links will work. Write down the ID you assign to each block because you will need the exact string when you configure the menu items. A mismatch between the menu's anchor target and the block's section ID is the most common reason anchor links silently fail.
3. Decide on sticky vs. static: If your page has three or more sections and any of them require scrolling to reach, use a sticky menu. If your page is short enough that all content is visible within one or two screen heights, a static menu is fine and has less visual weight. For most pages that benefit from a menu at all, sticky is the correct choice — the menu's value is in being accessible at all times, not just at the top of the page.
4. Plan your item count for mobile: Count your intended menu items. If you have more than six, reconsider — reduce to the five or six most important sections and link to secondary sections from within the page content instead. Six is a practical ceiling for mobile usability; beyond six, the hamburger dropdown becomes a list that visitors have to scroll, which eliminates most of the navigation benefit.

How to add the Menu block to your page

1. Open your page in the Dashboard: Log in to UniLink, go to My Pages, and click Edit on the page where you want to add navigation.
2. Set section IDs on target blocks first: Before adding the Menu block, go to each block that will be a navigation destination and open its settings. Find the Section ID or Anchor ID field and enter your chosen identifier (e.g., shop, faq, contact). Save each block. Do this for all anchor destinations before you create the menu — it prevents the back-and-forth of adding menu items and then discovering the anchors do not work because the section IDs were not set.
3. Add the Menu block: Click + Add Block. In the block picker, find the Navigation or Layout section and select Menu. Place the block at the top of your page block list so it renders above all content.
4. Add menu items: In the Menu block settings, click Add item for each navigation link. For each item, enter a label (the text visitors will see) and a link. For anchor links to sections on the same page, use the format #section-id — for example, #shop to jump to the block with section ID "shop." For links to external pages or other UniLink pages, enter the full URL.
5. Enable sticky if needed: Toggle on Sticky menu if you want the navigation bar to remain fixed at the top of the viewport while visitors scroll. This is recommended for pages with four or more sections.
6. Configure mobile layout: Choose whether the mobile layout should be a compact horizontal bar or a hamburger menu. If you have four or more items, select hamburger. Set the breakpoint (the screen width below which the hamburger appears) if the default does not match your design.
7. Set active link highlight: Enable the active link highlight if you want the menu item corresponding to the currently visible section to appear visually distinct (bolder, a different color, underlined). This provides visitors with a sense of location within the page and is especially helpful on long pages with many sections.
8. Set background color, font size, and text color: Style the menu to match your page design. The menu background color should contrast enough with your page background that the navigation bar is clearly visible, but not so strongly that it competes with your content visually. Keep font size readable at small screen sizes — menu labels need to be legible, not decorative.
9. Save and test on a real device: Save the block, open the live page on both desktop and a mobile phone, and click every menu item. Verify that anchor links jump to the correct section, that external links open the correct destination, and that the sticky behavior works as expected. Test the hamburger menu on mobile specifically — tap the icon, verify the dropdown opens cleanly, and tap each item to confirm it navigates correctly.

Key settings explained

When a menu transforms a page from a list into a destination

The clearest signal that a page needs a Menu block is when you or your visitors have to scroll more than two screen heights to find something. A bio page that has grown organically — you added a Shop, then an About section, then a FAQ, then a booking form — is a common example. Each block made sense individually, but the result is a page visitors have to explore rather than navigate. Adding a sticky menu with five clearly labeled items turns that page into something visitors can orient themselves in immediately. They arrive, see the navigation bar, understand what the page contains, and jump directly to what they came for. The bounce rate on pages that force scrolling to find content is consistently higher than on pages where the structure is immediately visible.

Multi-section pages are the primary use case, but the Menu block is also useful for multi-page UniLink setups — where you have multiple pages for different purposes (one for your shop, one for your blog, one for your coaching services) and want visitors on any one page to be able to navigate to the others. In this configuration, menu items point to full URLs rather than anchor links. The sticky behavior is less critical here since the navigation is between pages rather than sections, but the menu still provides a consistent navigation structure across your UniLink presence.

Course creators and coaches benefit particularly from the Menu block. A course landing page might have sections for curriculum, instructor bio, testimonials, pricing, and FAQ — all of which are high-intent destinations for a prospective student evaluating whether to enroll. A sticky menu that labels each of those sections lets a visitor go directly to Pricing or Testimonials without scrolling through Curriculum first. This respects the visitor's time and reduces the friction between landing on the page and finding the specific information that will convert them. Pages that respect visitor attention convert better than pages that require visitors to work to find what they want.

Troubleshooting

Frequently asked questions