Navigation

Site Nav

A standalone labelled nav list — the header’s menu contract without the header around it.

Element: <nav>
Module: @basenative/components
Function: renderSiteNav

Quick start

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

import { renderSiteNav } from '@basenative/components';

renderSiteNav({ label: 'Section', items: [{ label: 'Overview', href: '#overview', current: true }] });

Examples

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

Standalone labelled nav

The header’s menu contract on its own, for sidebars and section navs.

Live render

Source

renderSiteNav({
  label: 'Section',
  items: [
    { label: 'Overview', href: '#overview', current: true },
    { label: 'Details', href: '#details' },
    { label: 'Reviews', href: '#reviews' },
  ],
})

Options

Arguments accepted by renderSiteNav().

renderSiteNav option reference
Option	Type	Default	Description
`items`	`{ label, href, current? }[]`	`[]`	Nav items; the current one gets aria-current="page".
`label`	`string`	`'Primary'`	The nav’s aria-label.