About this block

Pill Links Nav groups the page links inside a bordered rounded pill in the centre of the header, a segmented control with the active page, Work, sitting on a secondary background. The name mark Avery Stone anchors the left and a quiet Say hello link with an arrow closes the right.

Links are one array with an active flag, and the highlighted state keys off aria-current so the styling and the accessible state stay in sync. The pill container is the distinctive choice; it reads as a compact switcher rather than a loose row of text links.

When to use

Reach for this block as the site header for a portfolio with a small, fixed set of pages where a segmented control makes the current page obvious. The installer swaps the name mark, the link labels and hrefs, and moves the active flag to the current page.

A natural flow around it on a Portfolio Pro page:

Before

• Nothing; this block opens the page.

After

• Hero sections
• Work grids

What you can display

One strong use is the segmented single-creator header. Other pill nav uses:

• Filled active. Swap the secondary background for the primary colour on the current page.
• Icon leading. Add a small icon before each label inside the pill.
• Two segments. Reduce to Work and About for a two page portfolio.

Tip: keep the pill to four links or fewer; past that the control grows wide and loses the tidy switcher shape that makes it work.