Navigation

Site Header

Brand link, nav toggle and primary nav menu; initSiteHeader wires the toggle (aria-expanded, Escape and outside-click close) for narrow viewports.

Element: <header>
Module: @basenative/components
Function: renderSiteHeader

Quick start

Import the render function and call it from your server template.

import { renderSiteHeader, initSiteHeader } from '@basenative/components';

const header = renderSiteHeader({
  brand: { name: 'Acme' },
  items: [{ label: 'Features', href: '#features' }, { label: 'Pricing', href: '#pricing', current: true }],
});

Examples

Each block is a real server render — no mockups, no virtual DOM.

Brand, menu and call to action

The current item carries aria-current="page". On narrow viewports the menu collapses behind the toggle; initSiteHeader wires it (the demo page initialises it for you).

Live render

Source

renderSiteHeader({
  brand: { name: 'Acme' },
  items: [
    { label: 'Features', href: '#features' },
    { label: 'Pricing', href: '#pricing', current: true },
    { label: 'About', href: '#about' },
  ],
  actions: '<a href="#start" data-bn="button" data-variant="primary">Get Started</a>',
})

Options

Arguments accepted by renderSiteHeader().

renderSiteHeader option reference
Option	Type	Default	Description
`brand`	`{ name?, logo?, href?, label? }`	`{}`	Brand name (escaped text) and logo mark (HTML slot).
`items`	`{ label, href, current? }[]`	`[]`	Nav items; the current one gets aria-current="page".
`actions`	`string`	`''`	Call-to-action HTML rendered as the menu’s trailing item.