SiteHeader

When to useLink to "When to use"

• Marketing and documentation sites built with Astro or React, where the window scrolls the whole page.

Use something else when:

• you are building an app with a side navigation and its own scrolling content area: AppShell
• you need the top of a page's content (title, description, actions): PageHeader

UsageLink to "Usage"

import { Button, SiteHeader, ThemeToggle } from "@arshad-shah/cynosure";

<SiteHeader
  brand="Acme"
  nav={[
    { label: "Docs", href: "/docs", current: true },
    { label: "Blog", href: "/blog" },
  ]}
  actions={<><ThemeToggle /><Button href="/sign-in">Sign in</Button></>}
/>
<main id="main">…</main>

In Astro, render it as a React island with client:load (or client:visible) so the menu button can open the sheet. Without hydration the bar, the links and the skip link still work; only the menu does not open.

Narrow screensLink to "Narrow screens"

Below collapseBelow (the header's own width: sm 40rem, md 48rem, lg 64rem) the links move into a sheet opened from a menu button. The actions stay in the bar.

StickyLink to "Sticky"

By default the header stays at the top while the page scrolls, over a blurred view of the page. sticky={false} lets it scroll away.

PropsLink to "Props"

Behaviour and accessibilityLink to "Behaviour and accessibility"

• Landmarks: the header is the banner landmark at the top level of the page. The links are a list in a nav named "Main" (labels.nav), in the bar and in the sheet.
• Current page: the item with current gets aria-current="page" and a highlight.
• Skip link: a SkipLink to skipTo (#main) is rendered before the header. skipLink={false} leaves it out, for a page that has its own.
• Menu button: an IconButton with aria-expanded. The sheet is a Sheet titled "Menu" (labels.menu), and its links are a SideNav.
• No script needed for the layout: the switch to the menu is a container query, so a server-rendered page shows the right layout at once.
• Right to left: the brand starts at the right.

TouchLink to "Touch"

The brand, the links and the menu button have hit areas of at least 24px, and 44px on coarse pointers. The links in the menu sheet are 44px tall.

ThemingLink to "Theming"

createTheme({ components: { siteHeader: { blur: "0px", linkCurrentColor: "#c2410c" } } });

The breakpoints of collapseBelow are fixed, because a container query cannot read a token. className and style are for layout only.

RelatedLink to "Related"

SkipLink · SiteFooter · Section · Container · AppShell · ThemeToggle