E-commerce navigation

The E-commerce dashboard's sidebar as plain data: its brand, its 12 routes and the shared footer.

Every E-commerce page imports NAV and ROUTES from here and passes activeHref={ROUTES.<page>}; install it alone to put the dashboard's sidebar on a page of your own. ROUTES is the one place the dashboard's routes are spelled, HOME is the overview's.

Install

npx shadcn@latest add @vibra/nav-ecommerce

Needs the @vibra registry in your components.json — set it up once.

Dependencies

Registry

Source

lib/dashboards/ecommerce/nav.ts

import { type NavConfig } from "@/lib/nav-config"

/** Every route of this dashboard, by page — what a page passes as activeHref. */
export const ROUTES = {
  overview: "/ecommerce",
  sales: "/ecommerce/sales",
  ordersOverview: "/ecommerce/orders/overview",
  orders: "/ecommerce/orders",
  order: "/ecommerce/orders/[id]",
  products: "/ecommerce/products",
  product: "/ecommerce/products/[id]",
  customers: "/ecommerce/customers",
  customer: "/ecommerce/customers/[id]",
  inventory: "/ecommerce/inventory",
  fulfillment: "/ecommerce/fulfillment",
  pos: "/ecommerce/pos",
} as const

export const HOME = ROUTES.overview

/**
 * The E-commerce dashboard's navigation, as plain data. AppShell resolves the
 * icon names and works out which item is current from the pathname; every
 * page of the dashboard passes this NAV and its own ROUTES entry. The same
 * pages are listed in ./manifest.ts, which the registry reads and this file
 * must not import — the manifest does not ship, and this file does.
 */
export const NAV: NavConfig = {
  brand: { name: "Northwind Store", initial: "N", href: HOME, caption: "E-commerce" },
  groups: [
    {
      label: "Store",
      items: [
        { title: "Overview", href: ROUTES.overview, icon: "layout-dashboard" },
        { title: "Sales", href: ROUTES.sales, icon: "chart-line" },
        {
          title: "Orders",
          href: ROUTES.orders,
          icon: "receipt",
          items: [
            { title: "Order book", href: ROUTES.orders },
            { title: "Overview", href: ROUTES.ordersOverview },
          ],
        },
        { title: "Products", href: ROUTES.products, icon: "package" },
        { title: "Customers", href: ROUTES.customers, icon: "users" },
        { title: "Inventory", href: ROUTES.inventory, icon: "package" },
        { title: "Fulfillment", href: ROUTES.fulfillment, icon: "package" },
        { title: "Point of sale", href: ROUTES.pos, icon: "shopping-cart" },
      ],
    },
  ],
  footer: [
    { title: "Settings", href: "/settings", icon: "settings" },
    { title: "Support", href: "/support", icon: "life-buoy" },
  ],
}