Horizontal Bar

v0.2.5

Documentation Under Review

Catalyst Horizontal Bar provides a flexible layout container for product application headers, navigation bars, and footer bars — combining a compound component pattern with built-in Catalyst design tokens so you get responsive default and transparent variants with zero boilerplate.

Installation

npm install @pmi/catalyst-horizontal-bar

import {
  HorizontalBarRoot,
  HorizontalBarStart,
  HorizontalBarMiddle,
  HorizontalBarEnd,
} from '@pmi/catalyst-horizontal-bar';

Common Patterns

Basic

A minimal header with logo branding and a user identity area. On mobile the hamburger menu replaces the start logo slot.

Action

Header with a primary call-to-action button in the end section, useful for product dashboards that need a prominent task entry point.

Search

Header with an integrated search field on desktop that collapses to an icon-only button on mobile.

API Reference

Horizontal Bar is a compound component. The sections below document the API surface for each part.

HorizontalBarRoot

The outer container that holds the three layout sections and controls the visual variant and border position.

HorizontalBarStart

Left-aligned slot (flex-grow, justify-start). All content placed here is pinned to the start edge.

HorizontalBarMiddle

Centre-aligned slot (mx-auto, justify-center). Use for a centred logo or title on mobile.

HorizontalBarEnd

Right-aligned slot (flex-grow, justify-end). Use for action buttons, avatar links, or utility icons.

Accessibility

Horizontal Bar is designed to meet WCAG 2.2 AA standards.

Keyboard Interactions

ARIA

• HorizontalBarRoot renders with role="banner" by default, establishing it as the page-level header landmark. Do not additionally wrap it in a <header> element — that would create two nested banner landmarks on the page.
• When using position="bottom" as a footer bar, pass role="contentinfo" explicitly: <HorizontalBarRoot position="bottom" role="contentinfo">.
• Icon-only buttons inside the bar must have aria-label for screen reader users.
• Logo links should include aria-label (e.g. "PMI Inc. – Home") to communicate the link destination beyond the visible text.
• Decorative logo images inside links must have aria-hidden="true" so AT derives the link name solely from the explicit aria-label.
• The hamburger button must include aria-expanded and aria-controls wired to the controlled navigation element — the consuming application is responsible for this state management.
• Catalyst adds the visual styling tokens; consuming teams are responsible for correct landmark and label semantics beyond the defaults above.

Choosing the Right Component

Use Horizontal Bar when you need a full-width application header or footer bar with distinct start / middle / end layout zones. Reach for a different primitive when:

Related

• Sidebar
• Navigation Menu
• Tabs
• Button
• Link
• Separator