Divided Nav
Full width header where the name mark and each page link occupy their own border separated cell, ending in a solid inverse contact cell.
Full width header where the name mark and each page link occupy their own border separated cell, ending in a solid inverse contact cell.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Divided Nav lays the header out as a row of border separated cells: the name mark Avery Stone fills the first flexible cell, Work, About, and Journal each take their own cell, and a solid inverse Contact cell closes the right for a brutalist editorial voice. On mobile the links collapse to a single menu button.
The name cell flexes to fill while the link cells stay content sized, and divide-x draws every seam, so the grid holds together without manual borders. The filled Contact cell is the distinctive detail; it anchors the row and gives the call to action visual weight against the outlined cells.
Reach for this block as the site header for a portfolio with a bold, structural voice, where the ruled grid suits the design language. The installer swaps the name mark, the link labels and hrefs, and the Contact destination.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the brutalist studio header. Other divided nav uses:
Tip: keep the link labels short and even in length so the cells stay close to the same width and the ruled grid reads as intentional.