# Installation

Requires a modern browser supporting ES modules, backdrop-filter, inert and ResizeObserver. No dependencies or build step.

## Try the included example
From this unzipped folder run `python3 -m http.server 8080 --bind 127.0.0.1` and open http://127.0.0.1:8080/example/. Use an HTTP server, not file:// (browser module security).

## Install in a separate website
1. Copy src/navbar.css and src/navbar.js into a folder named navbar in your own website.
2. Add `<link rel="stylesheet" href="./navbar/navbar.css">` to the head.
3. Add `<section id="site-navigation" aria-label="Site navigation"></section>` inside your existing header.
4. Create config.js beside your HTML. Copy example/config.js into it, change its import to `./navbar/navbar.js`, and configure your own brand and destinations.
5. Add `<script type="module" src="./config.js"></script>` before the closing body tag.
6. Supply normal page URLs or actual section IDs for every href. The component follows native links. Local section links focus their destination and support browser Back/Forward.
7. Give the host header a suitable max-width (1100px was used for the approved study), margin and padding. The component supplies its own typography, layout, glass and interaction styles. It is not sticky by default.
8. Serve your website over HTTP. Do not import example styles or any original demo page.

Use one navigation instance per page. Initialise once after its root exists. For SPA integrations mount on a stable layout that is not repeatedly destroyed. The current controller is intended for static pages; an SPA unmount/destroy adapter is not included.

Avoid broad host rules that override `.vn` descendants. Glass naturally reflects the background behind it; a different host background changes the perceived glass colour without changing the component. Test in your intended backdrop.