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.
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
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.