---
title: "JavaScript Navbar"
description: "The LemonadeJS Navbar block for JavaScript: Top navigation bar. Contract-verified, framework-agnostic, zero dependencies, with a live example."
source: https://lemonadejs.com/docs/plugins/navbar/
---

<link rel="stylesheet" href="/v6/navbar.css">

# JavaScript Navbar

`@lemonadejs/navbar` · ✓ 13 contract checks · framework-agnostic · zero dependencies

`<Navbar />` — the v5 navbar plugin on the v6 contract model

The v5 plugin is a mobile-style bar pinned to the bottom of its
positioned ancestor: three flex cells — a left <a href="prev">left`</a>`,
a centered title, and a right <a href="next">right`</a>`.

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

<!--example-->

```js
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

```bash
npm install @lemonadejs/navbar
```

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

Three deployment forms, one component:

```js
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.

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | string | `''` | centered text (v5: title) |
| `left` | string | `''` | left link label (v5: left) |
| `right` | string | `''` | right link label (v5: right) |
| `prev` | string | `''` | left link destination href (v5: prev) |
| `next` | string | `''` | right link destination href (v5: next) |

## 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:

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

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

Looking for the v5 plugin? See the [archived v5 documentation](/docs/v5/plugins/).