Visitor sites

NavBar

A site's navigation: its name or logo, its links and one call to action. The links wrap onto more lines as the page narrows, so every one stays in reach on a phone without a menu that needs script. It renders on the server and is part of site.css.

Usage

Mark the page the bar is drawn on with current, and it is announced as the current page:

A logo is drawn 32px tall, and its width and height reserve its box. Beside a brand the logo is decorative, because the name already says what it shows.

API

Prop	Type	Default	Description
`brand`	`string`	no default	The site's name, drawn beside the logo.
`logo`	`{ src; alt; width; height }`	no default	Drawn 32px tall. Its width and height reserve its box.
`links`	`{ label; href?; current? }[]`	`[]`	With no href a label is drawn as text. current marks the page the bar is on.
`action`	`{ label; href }`	no default	The one button at the end of the bar.
`label`	`string`	`'Main'`	The landmark's name for a screen reader.
`class`	`string`	no default	Extra classes on the nav.