About
Parent <ars-bottom-nav> manages active state across <ars-bottom-nav-item> children. Each item supports icon and label slots. Ideal for mobile-first navigation patterns.
Basic Usage
<ars-bottom-nav value="home">
<ars-bottom-nav-item value="home">
<span slot="icon">🏠</span>
Home
</ars-bottom-nav-item>
...
</ars-bottom-nav>
Event Monitor
Switch tabs to see events...
Theme Toggle
Usage
<ars-bottom-nav id="nav" value="home">...</ars-bottom-nav>
<script>
const nav = document.getElementById('nav');
nav.addEventListener('ars-bottom-nav:change', (e) => {
console.log('Switched to:', e.detail.value);
});
nav.value = 'map'; // programmatic switch
</script>