# Customisation

Pass a configuration object to createNavbar(root, config).

- brand: your business name (plain text).
- descriptor: optional secondary line.
- logo: optional {src: './logo.svg', alt: 'Your business logo'}. Use a real image with meaningful alt text. The Ledger direction is typographic and intentionally does not display a logo image.
- links: four {label, href} objects reproduce the approved geometry. Different link counts or unusually long copy require checking desktop fit.
- contact: {label, href} for the final action.
- navigationLabel, mobileLabel: accessible navigation names.
- menuNote: short mobile footer text.
- font: CSS font-family value. Default Arial, sans-serif; Ledger wordmark and mobile links retain their approved Georgia treatment. To replace those, add scoped overrides for `.vn[data-concept=ledger] .vn-brand strong` and `.vn[data-concept=ledger] .vn-menu-links>a`.
- theme: optional {accent, ink, surface} CSS colours. Omit to keep the approved palette. Lens uses a layered tinted glass surface; override `.vn[data-concept=lens] .vn-bar` only if intentionally changing that material.

No business identity is embedded in the component. The example business name and content are replaceable configuration. Use trusted URL values; do not feed unsanitised user input into configuration. No external font or artwork files are required.

Responsive behaviour uses the viewport: the mobile menu appears at 800px and below. For an embedded live preview use a real iframe at the desired width, not a CSS-scaled desktop div. Mobile targets are at least 44px high. Tab/Shift+Tab follow native links, arrow keys navigate an open mobile menu, Escape closes it and returns focus. Pointer gaps retain the last hover target; exit fades the indicator in place. Reduced-motion preference disables component animation.