HyTopbar

A responsive top navigation bar component for application headers.

The topbar provides a structured container for branding, navigation, and actions at the top of an application. It renders a semantic <header> element with role="banner" for proper accessibility.

Key Features

• Semantic <header> element with role="banner"
• Three-slot layout: start, default (center), end
• Fixed, sticky, or static positioning
• Responsive height with CSS custom properties
• Scroll-aware elevation and state changes
• Built-in skip link support for bypass blocks
• SSR compatible

Accessibility Features

• Renders semantic <header role="banner"> element
• Skip link slot for bypass blocks
• Proper landmark for screen readers
• Focus management with visible focus indicators
• High contrast mode support
• Reduced motion support
• Sets scroll-padding-top CSS custom property to prevent focus obscuring

Mobile Navigation

The default slot content is hidden on mobile (< 768px) to accommodate responsive layouts. To ensure navigation remains accessible on mobile devices, either:

• Provide a hamburger menu in the start slot that reveals navigation
• Add the show-content-mobile attribute to keep the default slot visible

Browser Compatibility

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

Examples

Basic Usage

<hy-topbar label="Main navigation">
  <a slot="start" href="/">Logo</a>
  <nav>Navigation links</nav>
  <div slot="end">Actions</div>
</hy-topbar>

With Skip Link

<hy-topbar>
  <a slot="skip" href="#main-content" class="skip-link">Skip to content</a>
  <a slot="start" href="/">Logo</a>
  <nav>Links</nav>
</hy-topbar>
<main id="main-content">...</main>

Fixed Position with Elevation

<hy-topbar position="fixed" elevated>
  <span slot="start">Brand</span>
  <nav>Navigation</nav>
  <div slot="end">
    <button>Login</button>
  </div>
</hy-topbar>

Transparent Header

<hy-topbar transparent position="fixed">
  <a slot="start" href="/">Logo</a>
  <nav>Navigation</nav>
</hy-topbar>

Events

• scroll - Emitted when scroll state changes. Detail: { scrolled: boolean }

Slots

• skip - Skip link for keyboard users (bypass blocks)
• start - Leading content (logo, hamburger menu)
• default - Main/center content (navigation, title)
• end - Trailing content (actions, user menu, search)