# Header The white band at the top of every page, holding the gov.bb logo and primary navigation. ## Preview ```html title="Header"
``` ```tsx import { Header, Link, LinkButton } from '@govtech-bb/react';
Services Ask assistant } />; ``` The Header sits at the top of every page, directly below the [official banner](/components/official-banner/). It holds the gov.bb logo, which links back to the homepage so users always have a way to start again. The logo image ships in the `@govtech-bb/frontend` package under `assets/images/`. Host it with your service and point `src` at your copy. Pass consumer-owned navigation content through `nav`. At tablet and desktop widths the logo and navigation share one horizontal row; links wrap onto further rows before the logo gives up any width. Keep `menuLabel` to a single word: a longer label takes its room from the logo. On mobile, the Header places the navigation in a tinted panel behind a Menu disclosure after JavaScript loads. A button in the navigation stretches across the mobile panel and appears before regular links while retaining its supplied order on larger screens. Without JavaScript, the navigation remains visible so its links are always available. The Header owns the navigation landmark, responsive disclosure state and accessibility wiring, but does not prescribe the links or controls inside it. It omits the menu control and navigation landmark when `nav` is empty. Use `children` for optional custom content in the top row. ## Usage

When to use

  • Use the header at the top of every page in a gov.bb website or service.
  • Use it to identify gov.bb and provide access to the site's most important sections.

When not to use

  • Do not add a second header or use it elsewhere on the page.
  • Do not place page-specific notices in the header; use a status banner.
## Best practices ### Keep navigation short and recognisable Use plain-language labels for important sections. Highlight the current section, keep ordering consistent and move lower-level navigation closer to the content it controls. ### Preserve the same identity at every width Keep the gov.bb identity visible and make the menu operable by keyboard and assistive technology. Do not use the logo as the page's `h1`. ## Client-side routing An href-compatible router component can render the logo's home link. Render the same router's links directly inside `nav`: ```html title="Header links rendered by a client-side router" Services ``` ```tsx import NextLink from 'next/link';
Services } />; ``` If a router uses a destination prop other than `href`, provide a small href-compatible adapter for the logo's `linkComponent`. Menu content can use that router's components directly.