BankaiHeader

A standalone <header> banner region — the top-of-page landmark that typically holds your navbar. The native element carries the banner role; the theme paints the house bar look (padding and a bottom border). Reach for it when you build a shell without BankaiLayout.

Usage

<!-- a shell built WITHOUT BankaiLayout -->
<BankaiHeader>
  <BankaiNavbar />
</BankaiHeader>
<main>…</main>

Landmark uniqueness

A native <header> is the banner landmark only when it is not nested inside <article>, <aside>, <main>, <nav>, or <section> — so use BankaiHeader at the top level of your document, not deep inside content.Do not place it inside BankaiLayout's #header slot: BankaiLayout already emits a <header> for that slot, so a nested BankaiHeader would produce a <header> inside a <header> — a duplicate banner landmark. With BankaiLayout, drop your navbar straight into #header; use BankaiHeader only for a hand-rolled shell.

Sticky header

The theme paints the page background onto the header's own box, so a position: sticky bar stays opaque over content scrolling beneath it — no extra background needed. Every theme rule is zero-specificity (:where()), so a plain declaration or utility class overrides the padding, border, or background without !important.

/* the header paints the page background, so a sticky bar covers content scrolling under it */
.bankai-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
}

Props

This component has no props.

Emits

This component emits no events.

Slots

Slot	Description
`default`	Header content — typically a BankaiNavbar (brand + links + actions).

Exposes

This component exposes nothing on its instance.

Theming

Every token is a :root custom property applied through zero-specificity :where() rules, so a single plain declaration overrides one — no selector, no !important. Set it globally on :root or locally on any ancestor.

Token	Default	Purpose
`--bankai-header-padding-block`	`var(--bankai-space-8)`	Vertical padding of the header region.
`--bankai-header-padding-inline`	`var(--bankai-space-12)`	Horizontal padding of the header region.
`--bankai-header-border-width`	`1px`	Width of the bottom border.
`--bankai-header-border-color`	`var(--bankai-color-border)`	Color of the bottom border.
`--bankai-header-background`	`var(--bankai-color-bg)`	Background fill of the header.