Bottom Navigation | DuskMoon Elements

The Bottom Navigation component provides a mobile-first navigation bar fixed at the bottom of the viewport for easy thumb access. It supports icons, labels, and multiple color themes.

Installation

npm install @duskmoon-dev/el-bottom-navigation

Usage

import '@duskmoon-dev/el-bottom-navigation/register';

<el-dm-bottom-navigation id="nav" value="home">
</el-dm-bottom-navigation>

<script>
  const nav = document.querySelector('#nav');
  nav.items = [
    { value: 'home', label: 'Home', icon: '<svg>...</svg>' },
    { value: 'search', label: 'Search', icon: '<svg>...</svg>' },
    { value: 'profile', label: 'Profile', icon: '<svg>...</svg>' }
  ];
</script>

Live Demo

Bottom Navigation Demo

Properties

Property	Type	Default	Description
`items`	`BottomNavigationItem[]`	`[]`	Array of navigation items
`value`	`string`	-	Currently selected item value
`color`	`'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error'`	`'primary'`	Color theme for active item
`position`	`'fixed' \| 'static' \| 'sticky'`	`'fixed'`	Position of the navigation bar

BottomNavigationItem Interface

interface BottomNavigationItem {
  value: string;      // Unique identifier
  label: string;      // Display label
  icon?: string;      // Icon HTML or SVG string
  disabled?: boolean; // Whether the item is disabled
  href?: string;      // Optional href for link behavior
}

Events

Event	Detail	Description
`change`	`{ value: string, item: BottomNavigationItem }`	Fired when selection changes

Event Handling

const nav = document.querySelector('el-dm-bottom-navigation');
nav.addEventListener('change', (e) => {
  console.log('Selected:', e.detail.value);
  console.log('Item:', e.detail.item);
});

Color Variants

<el-dm-bottom-navigation color="primary">...</el-dm-bottom-navigation>
<el-dm-bottom-navigation color="secondary">...</el-dm-bottom-navigation>
<el-dm-bottom-navigation color="success">...</el-dm-bottom-navigation>
<el-dm-bottom-navigation color="warning">...</el-dm-bottom-navigation>
<el-dm-bottom-navigation color="error">...</el-dm-bottom-navigation>

Slots

Slot	Description
default	Custom nav items (el-dm-bottom-navigation-item)

CSS Parts

Part	Description
`container`	The navigation container
`item`	Individual navigation item
`icon`	Item icon container
`label`	Item label

CSS Custom Properties

Property	Default	Description
`--bottom-nav-height`	`56px`	Height of the navigation bar
`--bottom-nav-bg`	`var(--color-surface)`	Background color
`--bottom-nav-text`	`var(--color-text-secondary)`	Inactive text color
`--bottom-nav-text-active`	`var(--color-primary)`	Active text color
`--bottom-nav-icon-size`	`24px`	Icon size
`--bottom-nav-label-size`	`0.75rem`	Label font size

Accessibility

Uses role="tablist" for the container and role="tab" for items
Keyboard navigation with Arrow keys, Home, End
aria-selected indicates the current selection
Disabled items have tabindex="-1" and are not focusable
Supports safe area insets for iOS devices