Bordered Grid Nav
A full bleed grid header where the logo, uppercase links, and actions sit in bordered cells split by dividers, ending in a solid CTA cell.
A full bleed grid header where the logo, uppercase links, and actions sit in bordered cells split by dividers, ending in a solid CTA cell.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Bordered Grid Nav is a full bleed header built from bordered cells. The logo sits in the first cell, each uppercase link occupies its own cell separated by full height dividers, a spacer pushes the rest to the edge, and the bar ends in a contact cell beside a solid primary CTA cell. Every boundary is a real border rather than spacing, which gives the header an architectural, drafting table feel. On mobile the link cells collapse into a slide in sheet.
The links are one array shared by the desktop cells and the mobile sheet, so the navigation cannot drift out of sync. The header runs edge to edge without a container, and the flex row stretches each cell to full height so the dividers read as a continuous grid. The final CTA cell fills with the primary color to anchor the right edge.
Reach for this block when the brand leans structural and confident: design studios, agencies, and architecture led products where the grid itself is part of the identity. It trades the soft, familiar feel of standard-sticky-nav for hard edges and uppercase type, so use it when the rest of the page carries the same disciplined, grid driven language.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is a design studio with a tight four link site. Other fits:
Tip: this layout is a promise of restraint, keep the links to four or five so the dividers stay a grid and not a fence.