skillup-footer

Shared site footer for every Base44 page served under skillup.global — same visual language as skillup-navbar, same backend-editable menus (Content\MainMenu/SecondaryMenu/TertiaryMenu via Skillup.NavBridge), so a link added in October's backend shows up in both the navbar and the footer without a Base44 deploy.

Install

npm install skillup-footer skillup-navbar

skillup-navbar is a peer dependency, not incidental — this package reuses its useSkillupNav hook rather than re-fetching menu data a second time, so both components read from one request/one source of truth when they're on the same page.

Other peer dependencies (already present in every in-scope Base44 app):

npm install react react-dom lucide-react

Tailwind: same as skillup-navbar — this package ships plain Tailwind utility classes in its compiled JS. Add it to your tailwind.config.js content array:

content: [
  "./src/**/*.{js,jsx,ts,tsx}",
  "./node_modules/skillup-navbar/dist/**/*.js",
  "./node_modules/skillup-footer/dist/**/*.js",
],

Usage — a real, live app

import { ConnectedFooter } from "skillup-footer";

<ConnectedFooter
  homeUrl="/"
  siteName="SkillUp"
  socialLinks={[
    { label: "LinkedIn", url: "https://linkedin.com/company/skillup" },
    { label: "Facebook", url: "https://facebook.com/skillup" },
  ]}
/>

logoSrc defaults to the same DEFAULT_LOGO_SRC as skillup-navbar (October's own SkillUp logo asset) — pass your own only to override it.

Same same-origin/cookie caveat as the navbar applies here too, though it matters less for the footer specifically since it doesn't render login state — it only affects whether the menu content resolves (it always does; menus are public) versus erroring, and it won't error either way (see skillup-navbar's useSkillupNav — fails soft to empty menus on a genuine fetch failure).

Running locally against Base44's own dev server

If you already added the navbar's proxy rule (/api/v1/nav → https://staging.skillup.global), nothing further to configure — this package calls the exact same path. See skillup-navbar's README for the full explanation of why that rule must stay scoped to /api/v1/nav and not a broader /api prefix.

Usage — fixture-driven preview (style guide, tests)

Use the presentational Footer directly with mock menu data — no network call:

import { Footer } from "skillup-footer";

<Footer
  homeUrl="/"
  siteName="SkillUp"
  menus={{
    mainMenu: [{ title: "Courses", url: "/courses", icon: null, external: false, children: [] }],
    secondaryMenu: [{ title: "About", url: "/about", icon: null, external: false, children: [] }],
    tertiaryMenu: [],
  }}
/>

Versioning

Pinned exactly per consuming app, never a ^/~ range — see the repo README for the update workflow. Because this package depends on skillup-navbar's exported types/hook, bumping skillup-navbar's major version in a consuming app may require bumping skillup-footer too — check its own changelog when you do.