Pattern Paste
Subscribe

Core Patterns Header

FreeStandard

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.

The strip is the one inverted thing on the page, so the facts a caller needs are read before the menu is. On a phone the menu folds to a button and the strip wraps to a short stack. States no colour and no font of its own.

All patterns

Loading patterns…

Look: Reversed strip
ThemePreview size
Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What to change first

  1. The number, in the button's label and its tel: link.
  2. The hours and the area. Keep each to one short line.
  3. The name and the menu. Select the navigation block, then Menu.
  4. The button's label and link. "Get a quote" suits a trade.

The signature moment

The reversed strip

The signature is one inverted band, thin, over a bar that is not. The strip is a full-bleed slab of your contrast with your base on it, about 44px tall, the only reversed thing on the page, so the telephone number reads before the name does. That is inversion and proportion, not decoration, so it survives colourlessness. It is what separates this header from nav-stack, which puts the same kind of facts in a quiet micro-row over a hairline, and from nav-bar, which has no facts at all.

Theme handoff

What comes from where

From your theme

  • The typeface.
  • Your colours.
  • Your menu.
  • Your button.

Set by this pattern

  • The name is on the ladder.
  • A 44px call target.
  • Labels keep their own size.
  • Both bands bleed; both inners hold 1240px
  • At 390

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

The header a local business actually needs: before the menu, the three things a caller wants, which are the number, when you are open and whether you come to them. A thin reversed strip carries those across the top; under it the bar holds the name, your menu and one Book online button over a hairline.

The signature moment: the reversed strip

The signature is one inverted band, thin, over a bar that is not. The strip is a full-bleed slab of your contrast with your base on it, about 44px tall, the only reversed thing on the page, so the telephone number reads before the name does. That is inversion and proportion, not decoration, so it survives colourlessness. It is what separates this header from nav-stack, which puts the same kind of facts in a quiet micro-row over a hairline, and from nav-bar, which has no facts at all.

Make it yoursVariations and the edits to make first

What to change first

  1. The number, in the button's label and its tel: link.
  2. The hours and the area. Keep each to one short line.
  3. The name and the menu. Select the navigation block, then Menu.
  4. The button's label and link. "Get a quote" suits a trade.
Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

  • The typeface. No family is stated in the base.
  • Your colours. The bar asks for base and contrast; the strip inverts them. Each chain falls back to white or black, so neither band can blank. Text on the strip is base on contrast, the pair every theme keeps apart.
  • Your menu. The links are a core/navigation block with overlayMenu: mobile, so the bar shows your site's menu and folds to core's menu button on a phone. Its colour asks for role-link, then contrast.
  • Your button. Book online states no colour, so your theme's button paints it.

What it decides for itself

  • The name is on the ladder. It is a heading on large, not x-large, because its job is hierarchy under the strip, and at 390 the name, the menu button and Book online must share one line.
  • A 44px call target. The number is a transparent core button linking to tel:, with 0.75rem above and below, so it is a full-size tap target on a phone, never a bare inline link. The hours and the area are plain text.
  • Labels keep their own size. The strip is set at clamp(0.9375rem, 0.9vw, 1rem), never the small preset, which is 13px in a theme with no scale.
  • Both bands bleed; both inners hold 1240px, so the strip's facts line up with the name and the button beneath them.
  • At 390 the strip wraps to the number on one line and the hours and the area under it, and the bar stays one line.
Technical notesBlock mechanics, responsive behaviour and constraints

Styled look: Frost and spruce

A clinic header that brings its own colours and face: a #f4f7f6 frost ground with #16302b ink; the strip, the hairline and a pill Book online button in #2e6b5e spruce with frost type; Gill Sans falling to Calibri and Trebuchet throughout. The navigation block states its overlay colours, so the phone menu opens on frost. Frost on spruce measures 5.8:1.

Notes

  • Core blocks only: group, heading, paragraph, navigation, buttons, button.
  • Every base colour is a fallback chain ending on a core-guaranteed colour; the hairline is currentColor.
  • No text sits on an accent rung in the base.

Questions

Nav utility bar: common questions

Does Nav utility bar 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 utility bar match my theme?

Choose by variation. Reversed strip takes your theme’s palette; Frost and spruce brings its own colours.

How many variations does Nav utility bar have?

2: Reversed strip and Frost and spruce. Each is its own markup; choose one in the toolbar above the preview before you copy.

Is Nav utility bar free?

Yes. It is one of 56 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. 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.

6,205 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":"0","bottom":"0","left":"0","right":"0"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-text-color has-background" 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;padding-right:0;padding-bottom:0;padding-left:0">
<!-- 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":"0.125rem","bottom":"0.125rem","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background" 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:0.125rem;padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:0.125rem;padding-left:clamp(1.25rem, 4vw, 4rem)">
<!-- wp:group {"style":{"spacing":{"blockGap":{"top":"0","left":"var:preset|spacing|50"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
<div class="wp-block-group">
<!-- wp:buttons {"style":{"spacing":{"blockGap":{"top":"0","left":"0"}}}} -->
<div class="wp-block-buttons">
<!-- wp:button {"url":"tel:+441174960418","style":{"color":{"background":"transparent","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"padding":{"top":"0.75rem","bottom":"0.75rem","left":"0px","right":"0px"}},"typography":{"fontSize":"clamp(0.9375rem, 0.9vw, 1rem)","fontWeight":"700"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background has-custom-font-size wp-element-button" href="tel:+441174960418" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:transparent;padding-top:0.75rem;padding-right:0px;padding-bottom:0.75rem;padding-left:0px;font-size:clamp(0.9375rem, 0.9vw, 1rem);font-weight:700">Call 0117 496 0418</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- 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.9vw, 1rem)","lineHeight":"1.5"}}} -->
<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.9vw, 1rem);line-height:1.5">Mon to Fri 8am to 6pm, Sat 9am to 1pm</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.9vw, 1rem)","lineHeight":"1.5"}}} -->
<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.9vw, 1rem);line-height:1.5">Serving Clifton, Redland and Cotham</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","style":{"border":{"bottom":{"color":"currentColor","width":"1px","style":"solid"}},"spacing":{"padding":{"top":"clamp(0.875rem, 1.4vw, 1.25rem)","bottom":"clamp(0.875rem, 1.4vw, 1.25rem)","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull" style="border-bottom-color:currentColor;border-bottom-style:solid;border-bottom-width:1px;padding-top:clamp(0.875rem, 1.4vw, 1.25rem);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:clamp(0.875rem, 1.4vw, 1.25rem);padding-left:clamp(1.25rem, 4vw, 4rem)">
<!-- wp:group {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|20","left":"var:preset|spacing|40"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
<div class="wp-block-group">
<!-- wp:heading {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.25rem, 1.8vw, 1.625rem))"}}} -->
<h2 class="wp-block-heading has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.25rem, 1.8vw, 1.625rem))">Lumen Dental</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|20","left":"var:preset|spacing|40"}}},"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":"var:preset|spacing|40"},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.1vw, 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.35rem","right":"1.35rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="padding-top:0.75rem;padding-right:1.35rem;padding-bottom:0.75rem;padding-left:1.35rem">Book online</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in Header

Explore all 4 Header patterns

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

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.

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

Nav bar

A header bar on one line: a heavy, tightly tracked wordmark at the left edge against tiny widely tracked links at the right, one solid action beside them, and a hairline under the whole bar.

HeaderPreview pattern
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