Pill Links Nav
Header with a name mark, page links inside a bordered rounded pill segmented control with the active one highlighted, and a quiet arrow link.
Header with a name mark, page links inside a bordered rounded pill segmented control with the active one highlighted, and a quiet arrow link.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
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.
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
After
One strong use is the segmented single-creator header. Other pill nav uses:
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.