Navigation Component

Local navigation component — an ordered list of navigation items, with support for a nested children list per item.

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 as flat text — href, homeHref, and nested children are declared on the props but not yet rendered as links or an accordion. Treat the props below as the intended shape, not confirmed working behavior.

Installation

pnpm add @phila/phila-ui-navigation @phila/phila-ui-core
# or
npm install @phila/phila-ui-navigation @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 { Navigation } from "@phila/phila-ui-navigation";

const items = [
  { label: "Services", href: "/services" },
  {
    label: "Programs",
    children: [
      { label: "Clean and Green Philly", href: "/clean-and-green" },
      { label: "Water Department", href: "/water" },
    ],
  },
  { label: "Office of the Mayor", href: "/mayor" },
];
</script>

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

As of this writing, this renders each label as plain text in a flat list — the nested children currently render as the literal word "accordion" next to a parent item's label rather than an actual expandable list, and no <a> tags are rendered for href.

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 Navigation.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