SiteHeader

The top bar on every page: logo, main navigation, language switch and the quote button.

Desktop, 1180px wide (scroll to see it all)Dark · Grafite

Desktop, 1180px wide (scroll to see it all)Light · Gelo

Below 72rem of its own width, the navigation and the button move into a menu. The menu is a native <details> element, so it works without JavaScript; the language switch stays visible.

Phone, 390px wide (open the menu)Dark · Grafite

PTEN

Pedir orçamento

Phone, 390px wide (open the menu)Light · Gelo

PTEN

Pedir orçamento

Usage

Provide the logo linking home (26px tall; the component uses the theme-following logo, logo-on-dark inks on dark and logo-on-light inks on light); up to seven nav links in sentence case; the current page marked with aria-current="page", which draws the K mark under it (current: 'true' marks the section a page belongs to); the language switch (PT / EN) in mono; and one primary button, “Pedir orçamento”. The bar is header-height tall with a border hairline below.

Do

Mark the current page (current: true) or its section (current: 'true').
Keep nav labels short and in sentence case.
Describe the other-language link for screen readers ("Read this page in English").

Don't

Add a second button.
Put the language switch inside the menu only.
Use icons for nav items.

Astro

---
import SiteHeader from '@monk-business/astro/SiteHeader.astro';
---

<SiteHeader
  items={[
    { label: 'Serviços', href: '/servicos/' },
    { label: 'Telecom', href: '/telecom/', current: true },
    { label: 'Produtos', href: '/produtos/' },
  ]}
  languages={[
    { label: 'PT', href: '/telecom/', lang: 'pt-BR', current: true },
    { label: 'EN', href: '/en/telecom/', lang: 'en', description: 'Read this page in English' },
  ]}
  cta={{ label: 'Pedir orçamento', href: '/contato/' }}
/>

HTML

<header class="mb-header">
  <a class="mb-header__logo" href="/" aria-label="Monk Business, página inicial">
    <img src="/logo-on-dark.svg" alt="" width="251" height="26" />
  </a>
  <nav class="mb-header__nav" aria-label="Principal">
    <ul class="mb-nav" role="list">
      <li><a href="/servicos/">Serviços</a></li>
      <li><a href="/telecom/" aria-current="page">Telecom</a></li>
    </ul>
  </nav>
  <div class="mb-header__actions">
    <div class="mb-lang" role="group" aria-label="Idioma">
      <b lang="pt-BR" aria-current="true">PT</b>
      <span aria-hidden="true">/</span>
      <a href="/en/telecom/" hreflang="en" lang="en">EN<span class="mb-sr-only"> Read this page in English</span></a>
    </div>
    <a class="mb-btn mb-btn--primary mb-header__cta" href="/contato/">Pedir orçamento</a>
    <details class="mb-header__menu">
      <summary class="mb-header__toggle">
        <span class="mb-header__burger" aria-hidden="true"><span></span><span></span></span>
        <span class="mb-header__toggle-label">Menu</span>
      </summary>
      <nav class="mb-header__panel" aria-label="Principal">
        <ul role="list">
          <li><a class="mb-header__panel-link" href="/servicos/">Serviços</a></li>
          <li><a class="mb-header__panel-link" href="/telecom/" aria-current="page">Telecom</a></li>
          <li class="mb-header__panel-cta">
            <a class="mb-btn mb-btn--primary mb-btn--block" href="/contato/">Pedir orçamento</a>
          </li>
        </ul>
      </nav>
    </details>
  </div>
</header>

Props

SiteHeader props
Prop	Type	Default	Description
`homeHref`	`string`	`'/'`	Home link of the logo.
`homeLabel`	`string`	`'Monk Business, página inicial'`	Accessible name of the logo link.
`items`	`NavItem[]`	—	Main navigation, up to seven links.
`navLabel`	`string`	`'Principal'`	Accessible name of the navigation.
`languages`	`LanguageLink[]`	—	Language switch: one entry per language, the current one marked `current`.
`languagesLabel`	`string`	`'Idioma'`	Accessible name of the language switch.
`cta`	`HeaderAction`	—	The one primary button, e.g. "Pedir orçamento".
`menuLabel`	`string`	`'Menu'`	Text of the menu button on phones and tablets.
`logoTone`	`Exclude<LogoTone, 'mono'>`	`'auto'`	Logo tone. `auto` follows the surface (on-dark on dark, on-light inside `.theme-light`).
`class`	`string`	—	Extra classes.

NavItem
Prop	Type	Default	Description
`label *`	`string`	—	Link text in sentence case. No icons.
`href *`	`string`	—	Link target.
`current`	`boolean`\| `'page'`\| `'true'`\| `'location'`	—	Marks the item current: `true` or `'page'` for the page itself, `'true'` for the section the page belongs to. Draws the K mark under the link.

LanguageLink
Prop	Type	Default	Description
`label *`	`string`	—	Short label in mono, e.g. "PT" or "EN".
`href *`	`string`	—	The current page in this language.
`lang *`	`string`	—	BCP 47 language tag, e.g. "pt-BR" or "en".
`current`	`boolean`	—	The language of the current page (shown in fg, not linked).
`description`	`string`	—	Visually hidden description of the link, e.g. "Read this page in English".

HeaderAction
Prop	Type	Default	Description
`label *`	`string`	—	Button label, e.g. "Pedir orçamento".
`href *`	`string`	—	Link target.

* required.