@woody601/navbar

A reusable responsive navbar for Next.js App Router projects.

Install

From npm after publishing:

npm install @woody601/navbar sass

From a sibling checkout before publishing:

npm install ../mw-webapp-framework/packages/navbar

Use

Add the package to transpilePackages in the consuming project's next.config.mjs:

const nextConfig = {
  transpilePackages: ["@woody601/navbar"],
};

export default nextConfig;

Then render it from a layout:

import Image from "next/image";
import NavBar from "@woody601/navbar";

const items = [
  { label: "Home", href: "/" },
  { label: "About", href: "/about" },
  {
    label: "Products",
    children: [
      { label: "Acrylic", href: "/products/acrylic" },
      { label: "Wood", href: "/products/wood" },
    ],
  },
];

<NavBar
  items={items}
  brand={<Image src="/logo.svg" width={180} height={60} alt="Company" />}
/>;

Because the navbar is fixed, give the consuming app's page content top spacing:

body {
  padding-top: 65px;
}

The component accepts items, brand, brandHref, menuLabel, ariaLabel, className, style, and onNavigate. Change package defaults in options/_navbar-config.scss and options/navbar-variables.scss.