# 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.

Canonical: https://patternpaste.com/pattern/nav-utility-bar.html
Section: Header
Access: Free, and free to keep.
Needs: 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.
Blocks: button, buttons, group, heading, navigation, paragraph
Keywords: header, nav, navigation, utility bar, top bar, phone, opening hours, local business, booking

## Variations (2)

### Reversed strip (the default)

Identical markup in every theme.

The strip inverts to your contrast with your base on it, the bar underneath sits on your base in your contrast, and the hairline under it is currentColor. The Book online button is your theme's own button.

### Frost and spruce

This variation states its own colours and states its own type: identical in every theme.

A clinic header: a #f4f7f6 frost ground with #16302b ink, the strip, the hairline and a pill Book online button in #2e6b5e spruce with frost type, set in Gill Sans falling to Calibri and Trebuchet.


---

## 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.

## 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.

## 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.

## 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.