Pattern Paste
Subscribe

Core Patterns Header

FreeStandard

Nav stack

A header built as a masthead rather than an app bar: a micro-row of tracked uppercase meta (address, hours, telephone) sits over a hairline, and under it the main row carries the wordmark, your WordPress menu and one filled action over a 3px rule.

Two stacked rows, two rules of different weight, both held to the same measure, so the top of the page reads as printed matter; on a phone the menu folds to a button and the main row stays one line.

All patterns

Loading patterns…

Theme
Preview size
Look

Takes your theme’s colours and type.

Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What to change first

  1. The wordmark. Replace "Hallmere" with your name.
  2. The meta row. Address, hours and telephone are the three a studio uses.
  3. The menu and the action. Select the navigation block, then Menu, and point it at yours; keep the labels to one word each, the row's rhythm is built on it.
  4. The rule weights. The hairline is 1px and the heavy rule 3px, both on the groups rather than as separators.
  5. The height. The row padding is spacing presets 30 and 40.

The signature moment

The double rule

The signature is the two rules of different weight, stacked. A hairline under the meta row and a 3px rule under the main row, both held to the same 1240px measure rather than bled to the viewport, is the oldest device in printed matter: it says nameplate before a single word is read. Nothing else in the section is trying to be clever. The wordmark is set in caps with open tracking against the meta row's tiny tracked caps, and the two rules do the rest.

Theme handoff

What comes from where

From your theme

  • The typeface.
  • Your colours.
  • Both rules.
  • Your spacing scale.
  • Your menu.

Set by this pattern

  • Full bleed, own measure.
  • The meta row's scale.
  • The wordmark's ramp.
  • The action's colours.

Full pattern notes

Why it works, and how it is built

Open a topic for the complete design reasoning, editing guidance and implementation notes.

Design rationaleComposition, intent and nearest alternatives

Overview

A page header set as a masthead: a micro-row of meta over a hairline, and under it the main row of wordmark, links and one action over a heavy rule. It is the first thing on a page and it does one job, which is to name the site and give the four ways out of it.

The signature moment: the double rule

The signature is the two rules of different weight, stacked. A hairline under the meta row and a 3px rule under the main row, both held to the same 1240px measure rather than bled to the viewport, is the oldest device in printed matter: it says nameplate before a single word is read. Nothing else in the section is trying to be clever. The wordmark is set in caps with open tracking against the meta row's tiny tracked caps, and the two rules do the rest.

That is also what separates it from nav-bar, which puts everything on one line and gets its signature from the collision of a heavy wordmark against tiny links. This one is deliberately two rows: the meta a masthead can carry (address, hours, telephone) has nowhere to live on a single line.

Make it yoursVariations and the edits to make first

What to change first

  1. The wordmark. Replace "Hallmere" with your name. It is a heading, so it is also what a screen reader announces first.
  2. The meta row. Address, hours and telephone are the three a studio uses. Any three short facts work: a location, a status line, a number. Delete one and the row still reads.
  3. The menu and the action. Select the navigation block, then Menu, and point it at yours; keep the labels to one word each, the row's rhythm is built on it. The action ships without a URL.
  4. The rule weights. The hairline is 1px and the heavy rule 3px, both on the groups rather than as separators. Take the heavy one to 4px or 6px if your theme's face is heavy enough to carry it.
  5. The height. The row padding is spacing presets 30 and 40. Step both down one rung if the masthead feels tall against your hero.
Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

  • The typeface. The pattern states no font family anywhere. The masthead is set in your face, serif or sans.
  • Your colours. The ground asks for base and the type asks for contrast, the two slugs every stock block theme defines. If a theme defines neither, the header falls back to white and black and still works.
  • Both rules. They are currentColor, not a colour of ours, so they cannot blank and they follow your text colour wherever your theme puts it.
  • Your spacing scale. The row padding is stated as spacing presets, so a theme with a generous scale gets a taller masthead without you editing anything.
  • Your menu. The links are a core/navigation block: the masthead shows the menu your site has, in your theme's link colour, falling back to contrast. With no menu assigned core lists your pages, which is what the preview's sample site shows. The action is a core button carrying your theme's element styles, so hover and focus are yours.

What it decides for itself

  • Full bleed, own measure. The ground spans the viewport; the content and both rules are held to 1240px, so the rules line up with the page's content rather than running off the edge.
  • The meta row's scale. 15px minimum, uppercase, tracked at 0.14em. It reads as fine print because of the tracking, not because it is small: anything a visitor actually reads stays at or above the 15px floor.
  • The wordmark's ramp. A clamp() from 24px to 36px, weight 700, caps, and tracked open at 0.06em, which is the nameplate move rather than the logotype move.
  • The action's colours. The links are plain type in the menu; the action inverts to the contrast ground with base type, so the one thing worth clicking is the one thing with a filled box round it. The two chains are each other's opposites, so it cannot vanish in any theme.
Technical notesBlock mechanics, responsive behaviour and constraints

At 390

The navigation block is set to overlayMenu: mobile, so below 600px core swaps the links for its menu button and the main row stays one line: the wordmark at the left, the button and the filled action together at the right. The button opens core's full-screen overlay with the menu in it. The meta row's three items still break onto their own lines under each other, and the hairline stays under all of them, because a masthead's meta is content and not navigation. Measured at 390 in both stock themes: no overflow, and the heavy rule holds under one row.

Styled look: Parchment and claret

A restaurant or venue masthead that brings its own colours and faces: #f4ecdc parchment ground, #3a1a1c ink, and both rules and a square Book a table button in #7a1f2b claret with parchment type. The name is italic Georgia; the address, hours, telephone and menu are Helvetica and Arial in sentence case. The navigation block states its overlay colours, so the phone menu opens on parchment. The same composition as the base, double rule included; only the palette and the faces are stated.

Notes

  • Core blocks only: group, paragraph, heading, navigation, buttons, button. No plugin; the menu button is core's own, driven by WordPress's Interactivity API.
  • Every colour is a fallback chain ending on a colour WordPress itself guarantees, so nothing in the header can resolve to nothing.
  • The rules are per-side group borders rather than core/separator, which Twenty Twenty-Four narrows to a centred stub unless it is is-style-wide.
  • No typography on the button: a button's typography has serialised to the outer div in some editor versions and the anchor in others, so it does not stay valid across them. The menu states none either; it is set at your theme's own size.

Questions

Nav stack: common questions

Does Nav stack need a plugin?

No. It is built only from core WordPress blocks (button, buttons, group, heading, navigation and paragraph), so it pastes into the block editor with nothing to install.

Will Nav stack match my theme?

Choose by variation. Paper masthead and Night masthead take your theme’s palette; Bough, Parchment and claret, Spur and Vow bring its own colours.

How many variations does Nav stack have?

6: Paper masthead, Bough, Night masthead, Parchment and claret, Spur and Vow. Each is its own markup; choose one in the toolbar above the preview before you copy.

Is Nav stack free?

Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Its Styled looks come with a subscription.

Which WordPress version does it need?

Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.

The markup

Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks. This is the file as authored; the copy button on the stage applies the finish you chose there.

5,269 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"},"blockGap":"0"},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:var(--wp--preset--spacing--40);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--40);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:group {"style":{"border":{"bottom":{"color":"currentColor","width":"1px","style":"solid"}},"spacing":{"padding":{"bottom":"var:preset|spacing|20"},"blockGap":{"top":"0.5rem","left":"1.875rem"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
<div class="wp-block-group" style="border-bottom-color:currentColor;border-bottom-style:solid;border-bottom-width:1px;padding-bottom:var(--wp--preset--spacing--20)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 0.85vw, 1rem)","letterSpacing":"0.14em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(0.9375rem, 0.85vw, 1rem);letter-spacing:0.14em;text-transform:uppercase">Bankside Yard, London SE1</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 0.85vw, 1rem)","letterSpacing":"0.14em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(0.9375rem, 0.85vw, 1rem);letter-spacing:0.14em;text-transform:uppercase">Monday to Friday, 9 to 6</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 0.85vw, 1rem)","letterSpacing":"0.14em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(0.9375rem, 0.85vw, 1rem);letter-spacing:0.14em;text-transform:uppercase">+44 20 7946 0231</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"bottom":{"color":"currentColor","width":"3px","style":"solid"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"},"blockGap":{"top":"0.75rem","left":"1.875rem"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
<div class="wp-block-group" style="border-bottom-color:currentColor;border-bottom-style:solid;border-bottom-width:3px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:heading {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--x-large, clamp(1.5rem, 2.6vw, 2.25rem))"}}} -->
<h2 class="wp-block-heading" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--x-large, clamp(1.5rem, 2.6vw, 2.25rem))">Hallmere</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"blockGap":{"top":"0.75rem","left":"1.5rem"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:navigation {"overlayMenu":"mobile","style":{"color":{"text":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"blockGap":"1.125rem"}},"layout":{"type":"flex","justifyContent":"right","flexWrap":"wrap"}} /-->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left"}} -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"spacing":{"padding":{"top":"0.75rem","bottom":"0.75rem","left":"1.5rem","right":"1.5rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="padding-top:0.75rem;padding-right:1.5rem;padding-bottom:0.75rem;padding-left:1.5rem">Start a project</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Variation: Night masthead
5,327 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"},"blockGap":"0"},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));padding-top:var(--wp--preset--spacing--40);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--40);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:group {"style":{"border":{"bottom":{"color":"currentColor","width":"1px","style":"solid"}},"spacing":{"padding":{"bottom":"var:preset|spacing|20"},"blockGap":{"top":"0.5rem","left":"1.875rem"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
<div class="wp-block-group" style="border-bottom-color:currentColor;border-bottom-style:solid;border-bottom-width:1px;padding-bottom:var(--wp--preset--spacing--20)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 0.85vw, 1rem)","letterSpacing":"0.14em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:clamp(0.9375rem, 0.85vw, 1rem);letter-spacing:0.14em;text-transform:uppercase">Bankside Yard, London SE1</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 0.85vw, 1rem)","letterSpacing":"0.14em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:clamp(0.9375rem, 0.85vw, 1rem);letter-spacing:0.14em;text-transform:uppercase">Monday to Friday, 9 to 6</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 0.85vw, 1rem)","letterSpacing":"0.14em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:clamp(0.9375rem, 0.85vw, 1rem);letter-spacing:0.14em;text-transform:uppercase">+44 20 7946 0231</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"bottom":{"color":"currentColor","width":"3px","style":"solid"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"},"blockGap":{"top":"0.75rem","left":"1.875rem"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
<div class="wp-block-group" style="border-bottom-color:currentColor;border-bottom-style:solid;border-bottom-width:3px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:heading {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--x-large, clamp(1.5rem, 2.6vw, 2.25rem))"}}} -->
<h2 class="wp-block-heading" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--x-large, clamp(1.5rem, 2.6vw, 2.25rem))">Hallmere</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"blockGap":{"top":"0.75rem","left":"1.5rem"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:navigation {"overlayMenu":"mobile","style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"blockGap":"1.125rem"}},"layout":{"type":"flex","justifyContent":"right","flexWrap":"wrap"}} /-->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left"}} -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"0.75rem","bottom":"0.75rem","left":"1.5rem","right":"1.5rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:0.75rem;padding-right:1.5rem;padding-bottom:0.75rem;padding-left:1.5rem">Start a project</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in Header

Explore all 6 Header patterns

Nav menu rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeaderNo plugin needed

Nav menu

The header that drives a real menu: your site logo and name at the left, your WordPress navigation menu standing against a full-height currentColor hairline, and a search field with a visible label behind it.

HeaderPreview pattern
Header station board rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeaderNo plugin needed

Header station board

A compact wordmark and broad destination links turn the header into a typographic signboard, with a separate address and opening-hours rail.

HeaderPreview pattern
Nav utility bar rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeaderNo plugin needed

Nav utility bar

A local-business header in two bands: a thin reversed strip across the top carries a tap-to-call telephone number, the opening hours and the area served, and under it the bar holds the name, your WordPress menu and one Book online button over a hairline.

HeaderPreview pattern