Nav With Socials
A connected header with the name mark and nav links on the left and a row of GitHub, LinkedIn, and Instagram icon links on the right.
A connected header with the name mark and nav links on the left and a row of GitHub, LinkedIn, and Instagram icon links on the right.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
Already purchased? Log in
Nav With Socials is the connected header, the name mark Avery Stone followed by three nav links, Work, About, and Contact, grouped on the left, and a compact row of icon links for GitHub, LinkedIn, and Instagram on the right. The social row replaces the CTA button with passive presence: a visitor curious about the person can reach their platforms directly from any page.
Nav links are one array; social links are a second array pairing each label with its brand icon component from ui/brand-icons. The nav links hide on small screens, keeping the bar uncluttered on mobile.
Reach for this block at the top of a portfolio where platform presence is part of the professional identity, particularly for developers, designers who share work in progress, and writers. The installer swaps the name, the nav links, and the three social hrefs.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the developer or open-source contributor header. Other social bar uses:
Tip: include only platforms where the work or thinking is actually visible; a link to an empty profile is worse than no link at all.