JavaScript Navbar

Full property parity: title / left / right / prev / next, all live States. New in v6: onprev / onnext click events, so the bar can drive in-app state (a router, a pager, a calendar) instead of forcing the full page load that v5’s href-only navigation required. When prev or next is empty the href attribute is omitted entirely (v5 rendered a self-referencing href="").

Labels and title are TEXT (v6 escapes by default) — exactly what the v5 template produced with its ${this.left} text slots.

Example

live

LemonadeJS

import { html } from 'lemonadejs';
import Navbar from '@lemonadejs/navbar';

const chapters = ['Getting started', 'Templates', 'State', 'Components', 'Routing'];

const App = (props, { state }) => {
    const page = state(0);
    const title = state(chapters[0]);
    const go = (step) => {
        page.value = Math.min(chapters.length - 1, Math.max(0, page.value + step));
        title.value = chapters[page.value];
    };

    return html`<div style="position: relative; height: 140px; border: 1px solid #e4e4e7; border-radius: 8px;">
        <p style="margin: 16px; text-align: center;">
            Chapter ${() => page.value + 1} of ${chapters.length}: <b>${title}</b>
        </p>
        <${Navbar} title="${title}" left="‹ Prev" right="Next ›"
            onprev="${() => go(-1)}" onnext="${() => go(1)}" />
    </div>`;
};

Installation

npm install @lemonadejs/navbar

import Navbar from '@lemonadejs/navbar';
import '@lemonadejs/navbar/style.css';

Three deployment forms, one component:

html`<${Navbar} />`                       // by value (no registration)
setComponents({ Navbar });               // then <Navbar /> by name anywhere
createWebComponent(Navbar);              // <lm-navbar> in plain HTML/any framework

Props

Every declared prop arrives as a live state — pass a value for a snapshot or a state for a two-way live wire. Attribute strings are coerced to the declared type.

Events

All event names are lowercase (the platform convention — LJS-305 warns otherwise).

• onprev — left link clicked (new in v6)
• onnext — right link clicked (new in v6)

Styling

All classes follow the lm-navbar-* convention; visual variants are data-* attributes on the root. Override freely — there is no styling engine to fight.

Contract

The machine-readable schema ships with the package:

import contract from '@lemonadejs/navbar/contract.json';

verify.json carries the conformance proof produced by verify(Navbar).