Side Rail Nav
A fixed left rail with the name mark and role, stacked section links with an active highlight, and a bottom row of social icons.
A fixed left rail with the name mark and role, stacked section links with an active highlight, and a bottom row of social icons.
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
Side Rail Nav moves the whole header to a fixed left column: the name mark Avery Stone and a Product designer role line sit at the top, five section links (Work, About, Services, Journal, Contact) stack down the middle with the active one held in a filled pill, and a location line reading Based in Oslo, Norway pins to the bottom above a row of GitHub, LinkedIn, and Instagram icon links.
On small screens the rail collapses to a slim top bar carrying just the name and a menu button, so the vertical layout never crowds a phone. Nav links and socials are two separate arrays, each item a label paired with an href or a brand icon component from ui/brand-icons.
Reach for this block when the portfolio leans on a persistent side navigation rather than a top bar, particularly for single-page sites where the rail doubles as a table of contents. The installer swaps the name, the role line, the section links, and the location.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the single-page designer portfolio where each link scrolls to a section. Other side rail uses:
Tip: keep the rail to five or six links; the fixed width column reads best when every label fits on one line without wrapping.