Numbered Nav
Header with a name mark on the left, horizontal links each carrying a zero padded index number, and a small index caption on the right.
Header with a name mark on the left, horizontal links each carrying a zero padded index number, and a small index caption on the right.
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
Numbered Nav puts the name mark Avery Stone on the left and prefixes each horizontal link with a small zero padded index, so Work reads as 01, About as 02, Journal as 03, and Contact as 04. A quiet caption, Index 01 to 04, closes the row on the right, giving the header an editorial table of contents feel.
The links are one array and each number is derived from its position with padStart, so the count stays correct when you add or reorder pages. The numeric prefix is the distinctive detail; it lends a print inspired rhythm to a header that would otherwise be a plain link row.
Reach for this block as the site header for a portfolio that leans editorial, where a numbered index of pages suits the tone. The installer swaps the name mark and the link labels and hrefs; the numbers update themselves.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the editorial numbered header. Other numbered nav uses:
Tip: keep the link set short, four or five at most, so the numbered sequence stays legible and does not crowd the row.