HyBottombar

A responsive bottom navigation bar component for mobile-style navigation.

The bottombar provides a structured container for navigation items at the bottom of an application, typically used for mobile navigation. It renders a semantic <nav> element with role="navigation" for proper accessibility.

Key Features

• Semantic <nav> element with role="navigation"
• Centered flexbox layout for navigation items
• Fixed, sticky, or static positioning
• Responsive height with CSS custom properties
• Built-in safe area inset support for notched devices
• SSR compatible

Accessibility Features

• Renders semantic <nav role="navigation"> element
• Proper landmark for screen readers
• Focus management with visible focus indicators
• Sets scroll-padding-bottom to prevent focus obscuring behind fixed/sticky bar
• Uses inert attribute when collapsed to remove from accessibility tree
• High contrast mode support
• Forced colors mode support (Windows High Contrast)
• Reduced motion support
• Hidden in print styles

Browser Compatibility

• Modern browsers (Chrome, Firefox, Safari, Edge)
• SSR support via Lit's isServer

Examples

Basic Usage

<hy-bottombar label="Main navigation">
  <hy-icon-button name="home" label="Home"></hy-icon-button>
  <hy-icon-button name="search" label="Search"></hy-icon-button>
  <hy-icon-button name="favorite-border" label="Favorites"></hy-icon-button>
  <hy-icon-button name="lock" label="Account"></hy-icon-button>
</hy-bottombar>

Fixed Position with Elevation

<hy-bottombar position="fixed" elevated>
  <hy-icon-button name="home" label="Home"></hy-icon-button>
  <hy-icon-button name="search" label="Search"></hy-icon-button>
  <hy-icon-button name="info" label="Info"></hy-icon-button>
</hy-bottombar>

Slots

• default - Navigation items (typically icon buttons)