@raihan004/shopify-app-nav

Reusable Shopify embedded app navigation shell for React Router apps.

Install

npm install @raihan004/shopify-app-nav

This package expects these peer dependencies in your app:

npm install react react-dom react-router @shopify/shopify-app-react-router

Usage

import { Outlet, useLoaderData } from "react-router";
import { ShopifyAppShell, type NavItem } from "@raihan004/shopify-app-nav";

const navItems: NavItem[] = [
  { label: "Dashboard", href: "/app" },
  { label: "Analytics", href: "/app/analytics" },
  { label: "Settings", href: "/app/settings" },
];

export default function App() {
  const { apiKey, setupComplete } = useLoaderData<typeof loader>();

  return (
    <ShopifyAppShell
      apiKey={apiKey}
      navItems={navItems}
      showNav={setupComplete}
    >
      <Outlet />
    </ShopifyAppShell>
  );
}

Components

• ShopifyAppShell: wraps your app with Shopify's AppProvider, optional navigation, and optional top progress bar.
• ShopifyAppNav: renders Shopify's <s-app-nav> and <s-link> web components from a typed nav item list.
• TopProgressBar: shows a small route-aware progress indicator during React Router navigations and fetcher activity.

API

type NavItem = {
  label: string;
  href: string;
  hidden?: boolean;
};

type ShopifyAppShellProps = {
  apiKey: string;
  navItems?: NavItem[];
  showNav?: boolean;
  embedded?: boolean;
  progress?: boolean | TopProgressBarProps;
  children: React.ReactNode;
};

Build

npm install
npm run build
npm pack --dry-run