HyBottombar

Usage examples on this page are written for Lit / plain HTML (<hy-bottombar>). The same component ships as HyBottombar in @whitespaceux/harmony-react (native React 19), with typed wrappers for Angular, Solid, Svelte, and Vue. The API reference below applies to all frameworks.

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>

API

Properties

Property	Attribute	Type	Default	Description
position	position	'fixed' | 'sticky' | 'static'	'fixed'	CSS positioning of the bottombar
height	height	string	''	Height of the bottombar. Accepts any valid CSS value.
elevated	elevated	boolean	false	Whether the bottombar has elevation (shadow)
bordered	bordered	boolean	true	Whether the bottombar has a top border
collapsed	collapsed	boolean	false	Whether the bottombar is collapsed/hidden
label	label	string	''	Accessible label for the bottombar

Slots

Slot	Description
default	Navigation items (typically icon buttons)

CSS Parts

Part	Description
base	The component's base wrapper element (the <nav>)
container	The inner container for content alignment

CSS Custom Properties

Property	Description
--hy-bottombar-height	Height of the bottombar (default: --hy-surface-height-md)
--hy-bottombar-background-surface-elevation	Background color. Default: --hy-background-surface-elevation-2 (same as surface-base in light mode; lifts in dark mode for OLED-true-black visibility)
--hy-bottombar-border-default-rest	Top border color (default: --hy-border-default-rest)
--hy-bottombar-shadow-elevation	Box shadow when elevated (default: --hy-shadow-elevation-2-up)
--hy-bottombar-padding-inline	Horizontal padding (default: --hy-padding-shell-inline)
--hy-bottombar-focus-radius	Focus indicator border radius (default: --hy-focus-ring-radius)
--hy-bottombar-gap	Gap between items (default: --hy-gap-shell-inline)
--hy-bottombar-item-max-width	Maximum width of each item (default: --hy-surface-width-xs)
--hy-bottombar-stroke	Border width for top border
--hy-bottombar-enter-duration	Transition duration for the show and hide entrance animation
--hy-bottombar-enter-easing	Transition easing for the show and hide entrance animation