CatalystHorizontal Barv0.2.3Documentation Under Review
A flexible compound component system for creating product application headers and navigation bars with customizable start, middle, and end sections.
Prefer AI-assisted development?
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-barimport {
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.
Basic start
Standard horizontal bar start section with PMI logo that adapts to light/dark mode.
Basic middle
Standard horizontal bar middle section with centered logo.
Basic end
Standard horizontal bar end section with user information and avatar.
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.
Prop
Type
HorizontalBarStart
Left-aligned slot (flex-grow, justify-start). All content placed here is pinned to the start edge.
Prop
Type
HorizontalBarMiddle
Centre-aligned slot (mx-auto, justify-center). Use for a centred logo or title on mobile.
Prop
Type
HorizontalBarEnd
Right-aligned slot (flex-grow, justify-end). Use for action buttons, avatar links, or utility icons.
Prop
Type
Accessibility
Horizontal Bar is designed to meet WCAG 2.2 AA standards.
Keyboard Interactions
| Key | Action |
|---|---|
Tab | Moves focus through interactive elements inside the bar |
Shift + Tab | Moves focus backward through interactive elements in the bar |
Enter | Activates the focused link or button |
ARIA
HorizontalBarRootrenders a plain<div>. Wrap it in a<header>withrole="banner"or a<nav>witharia-labelif it serves as a landmark.- Icon-only buttons inside the bar must have
aria-labelfor accessibility. - Logo links should include
aria-label(e.g."Project Management Institute") andaria-current="page"when appropriate. - Catalyst adds the visual styling tokens; consuming teams are responsible for correct landmark and label semantics.
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:
| If you need… | Use instead |
|---|---|
| A vertical side navigation panel | Sidebar |
| A horizontal tab-based page navigation | Tabs |
| A full-page navigation menu with flyout sections | Navigation Menu |
| A dropdown or context menu triggered by a button | Dropdown Menu |
| A page-level footer with links and legal text | Footer |
Related
Data Table
Build feature-rich, accessible data tables with sorting, filtering, pagination, row selection, and advanced interactions powered by TanStack Table.
Table
A semantic HTML table component for product interfaces with customizable styling via CVA. Supports headers, body, footer, captions, styled cells, and brand theming capabilities.