About this block

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.

When to use

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

• Nothing. This is the first block on the page.

After

• Heroes with restrained, grid aligned copy under the bar
• Case studies proving the work the header promises

What you can display

One strong use is a design studio with a tight four link site. Other fits:

• Creative agency. Work, studio, services, and journal as cells, start a project as the CTA.
• Architecture practice. Projects and about beside contact, the mark carrying the reputation.
• Product with one job. Two feature links and two proof links framed by the bordered grid.

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.