PageNav Component

In-page ("on this page") navigation component — a sticky list of section links.

Early-stage: the component doesn't have a Storybook status tag yet (unlike every other package in this repo), and the current template only renders each item's label (and, as a bug, the raw children array interpolated as text when present) — href and homeHref are declared on the props but not yet rendered as links or wired to scroll/anchor behavior. There's also a hardcoded "Beta" label in the template and a TO DO: Need to add active, hover etc link styles comment in the source. Treat the props below as the intended shape, not confirmed working behavior.

Installation

pnpm add @phila/phila-ui-page-nav @phila/phila-ui-core
# or
npm install @phila/phila-ui-page-nav @phila/phila-ui-core

Import core styles in your main entry file (e.g., main.js|ts):

import "@phila/phila-ui-core/styles/template-light.css";

Usage

<script setup lang="ts">
import { PageNav } from "@phila/phila-ui-page-nav";

const items = [
  { label: "Services", href: "#services" },
  { label: "Resources", href: "#resources" },
  { label: "Board members", href: "#board-members" },
  { label: "Connect", href: "#connect" },
];
</script>

<template>
  <PageNav :items="items" />
</template>

Props

| Prop | Type | Default | Description | | ----------- | ------------------ | ----------- | ----------------------------------------------------------------------- | | items | NavigationItem[] | required | { label: string, href?: string, children?: NavigationItem[] }[] | | homeHref | string | undefined | Declared on the props but not currently read anywhere in PageNav.vue. | | className | string | undefined | Additional CSS classes. |

Development

Install Dependencies

pnpm install

Run Demo

pnpm dev

Build Library

pnpm build

Type Check

pnpm type-check

Publishing to NPM

Follow the release instructions using changesets.

License

MIT