About
A responsive header bar with a brand section (title, subtitle, and optional mark slot), centered navigation pills, and a right-aligned status area. Navigation clicks emit a composed custom event for the host to handle.
Live Demo
Event Log
Theme Toggle
Usage
<ars-toolbar
title="My App"
subtitle="v2.0"
status="Online"
active-item="home"
>
<div slot="brand-mark">MA</div>
</ars-toolbar>
<script>
const toolbar = document.querySelector('ars-toolbar');
toolbar.items = [
{ id: 'home', label: 'Home' },
{ id: 'settings', label: 'Settings' }
];
toolbar.addEventListener('ars-toolbar:navigate', (e) => {
console.log('Navigated to:', e.detail.id);
});
</script>