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 Bricks 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
All photos and visual assets used in this preview are sourced from Unsplash.
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
- Bricks, ACSS, plain CSS
Options 21
Set on the section, in Bricks’ 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 €99 once with Pro Unlimited Lifetime: all 785 patterns, unlimited sites.
Get Pro
