Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pagePortfolio Rail Nav
Editorial side-rail header for a photography or studio portfolio, as a plain, fully editable Etch tree: section > frame > rail (monogram + name + role, availability status, numbered index of "Rail Link" instances with a…
50 sites for €79 only, Compare all plans
The system behind it
One pattern, your whole brand.
Portfolio Rail Nav reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.
- Type
- Layout
- Category
- Footers and headers
- Responsive
- Desktop to phone
- Works with
- Etch, ACSS, plain CSS
Options 21
Set on the section, in Etch’s attributes panel. No code needed.
data-themesplit = ink rail beside a paper page
data-sidewhich edge the rail sits on at desktop widths
data-railcompact shows the monogram and index numbers only and expands over the page on hover or keyboard focus
data-positionsticky keeps the rail (and the mobile bar) pinned while the page scrolls
data-accentACSS colour of the indicator, status dot, CTA arrow and accent badges
data-indicatorthe marker that slides to the hovered or focused link and rests on the current one
data-previewfloating photo preview card for links that have one (also the thumbnails in the mobile menu)
data-preview-effecthow the preview card appears
data-dimfade the other links while one is hovered
data-numbersthe 01, 02 index numbers (compact mode always shows them)
data-scalesize of the index labels
data-densityvertical rhythm of the index
data-statusavailability line under the name
data-clocklive local time
data-timezoneIANA name
data-hour12data-socialsthe social links
data-ctathe Start a project pill
data-menumobile menu style
data-durationms · +
data-easingor any cubic-bezier( · ) for the indicator, preview glide, rail expand and menu reveal
Component props 4
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
labelNew
toneaccent
labelWork
url#work
currentFalse
showCountTrue
count48
showPreviewTrue
imagehttps://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=600
previewTitleLow tide, Comporta
previewMeta2026
labelurlhttps://instagram.com
target_blank
showArrowTrue
imagehttps://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=900
altPale beach and turquoise water seen from above
titleAtlantic
showMetaTrue
metaSeries, 2026
url#work
ratioportrait
Included in Pro From €39 a year, with all 469 patterns.
Get ProMore patterns
