UI ComponentsLayout
App Bar
Responsive application branding and navigation.
Import
import { AppBar } from "@puzzle-ui/ui";Navigation
The app bar adapts its navigation to a mobile drawer. Resize the preview to see both layouts.
API
| Prop | Type | Default | Description |
|---|---|---|---|
logo | ReactNode | - | Brand content. |
title | string | - | Application title. |
logoHref | string | "/" | Brand destination. |
navigationItems | { label: string; href: string; current?: boolean; external?: boolean }[] | [] | Navigation links. |
customNavigationItems | T[] | - | Custom navigation data. |
renderCustomNavigationItems | (item: T, index: number) => ReactNode | - | Renderer for custom items. |
trailingComponents | ReactNode | - | Actions after navigation. |
sticky | boolean | false | Sticky positioning and PageLayout offset integration. |
ariaLabel | string | "Main navigation" | Accessible navigation name. |
className | string | - | Root styling hook. |
Use descriptive destinations and label icon-only actions. Place sticky bars in PageLayout.Header to scope their measured layout offset to that page. Make the header region itself sticky (position: sticky; top: 0) when it wraps the bar, so the wrapper does not limit its sticky travel.