@progressive-development/pd-page

Page layout components for navigation, footer, and contact sections.

Features

• Lit 3 & TypeScript – Modern, type-safe web components
• Accessible – WCAG 2.1 compliant, keyboard navigation, ARIA support
• Themeable – CSS Custom Properties for easy customization
• Localized – Built-in i18n support (EN, DE, BE)
• Lightweight – No heavy dependencies, tree-shakeable
• Framework-agnostic – Works with React, Vue, Angular, or vanilla JS
• Smart Scroll Navigation – Auto-highlight menu items based on scroll position with smooth scrolling
• Responsive Menu – Desktop navigation with automatic burger menu on mobile
• Dual-Mode Social Media – View mode for icon links, edit mode for managing profiles
• Integrated Contact Form – Split layout with company address and validated contact form

Installation

npm install @progressive-development/pd-page

Quick Start

<script type="module">
  import '@progressive-development/pd-page';
</script>

<pd-menu .menuItems=${items}></pd-menu>
<pd-footer></pd-footer>

Components

| Component | Description | |-----------|-------------| | <pd-menu> | Responsive navigation menu with scroll tracking | | <pd-footer> | Page footer | | <pd-contact-us> | Contact section with form and address | | <pd-socialmedia> | Social media links (view and edit modes) |

Documentation

📖 Full documentation: pd-components.web.app

License

MIT © PD Progressive Development UG