App Header · Youj

Installation & usage

npm i @youj/react

For an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.

Use it as the one bar across the top of an app or a marketing site: the logo, the primary navigation (plain links or a Mega Menu), a search button for the Command Palette, a few actions and the Account Menu. An app whose navigation lives down the side wants a Sidebar instead, often with a slimmer header beside it. On phones, where the primary destinations belong under the thumb, pair it with a Bottom Tab Bar.

import {
  AccountMenu,
  AppHeader,
  AppHeaderActions,
  AppHeaderBrand,
  AppHeaderMenu,
  AppHeaderMenuLink,
  AppHeaderNav,
  AppHeaderSearch,
} from '@youj/react'
import { CommandGroup, CommandItem, CommandPalette } from '@youj/react/command'
import { useState } from 'react'

export function Header() {
  const [palette, setPalette] = useState(false)
  return (
    <AppHeader>
      <AppHeaderBrand href="/">
        <Logo />
        Northwind
      </AppHeaderBrand>
      <AppHeaderNav>
        <MainNavigation />
      </AppHeaderNav>
      <AppHeaderActions>
        <AppHeaderSearch onClick={() => setPalette(true)} />
        <AccountMenu user={user} onSignOut={signOut} />
        <AppHeaderMenu header="Northwind">
          <AppHeaderMenuLink href="/deployments" active>
            Deployments
          </AppHeaderMenuLink>
          <AppHeaderMenuLink href="/analytics">Analytics</AppHeaderMenuLink>
        </AppHeaderMenu>
      </AppHeaderActions>
      <CommandPalette open={palette} onOpenChange={setPalette}>
        <CommandGroup heading="Go to">
          <CommandItem onSelect={() => setPalette(false)}>Deployments</CommandItem>
        </CommandGroup>
      </CommandPalette>
    </AppHeader>
  )
}

The parts are slots in one row. AppHeaderBrand is a link (pass render for your router's link), AppHeaderNav holds the wide-screen navigation and hides below md, and AppHeaderActions pushes everything after it to the inline end. AppHeaderMenu is the phone navigation: a hamburger that only shows below md, opening a Sheet. Put the same destinations in both.

Description

A header with a brand, navigation, a search button that opens a command palette, an account menu and a phone menu, over a scrolling page.

The header is sticky and starts flat, on the page's own background. Once content scrolls under it, it condenses: 8px shorter, a translucent blurred surface, a hairline and a soft shadow, so what passes beneath reads as beneath. It condenses past 24px and relaxes under 8px. That gap keeps it from flickering when someone scrolls back and forth around the threshold, and a reversal mid-transition carries on from where it is.

The bar's height is the control height plus padding, so a compact or comfortable theme scales it with its controls. It tracks the page by default. Pass scrollContainer when the content scrolls inside an element, as the preview does, and condense={false} to keep it flat.

AppHeaderSearch looks like a field, but it's a button: the palette is the field. On wide screens it shows its placeholder and the shortcut, ⌘K on Apple platforms and Ctrl K elsewhere. Below md it becomes an icon button. It's named "Search" at every size and announces its shortcut through aria-keyshortcuts. Set shortcut to the same key as the palette's own shortcut (the preview uses j, because this site's search already owns ⌘K), or false to hide it.

Below md, the hamburger's bars morph into a cross as the sheet slides in from the inline end, and the sheet's own cross lands exactly where the hamburger was. header sits at the top of the sheet (the brand, or a Workspace Switcher) and footer is pinned to the bottom. Every AppHeaderMenuLink closes the sheet as it's followed, and the sheet closes itself if the window widens past md. Open this page on a phone, or narrow the window, to try it.

Reference

Propssticky, condense, scrollContainer… (26)

Props

AppHeader props
Prop	Type	Default
`sticky`	`boolean` Stays at the top of its scroll container. default true	`true`
`condense`	`boolean` Condenses once content scrolls under it. default true	`true`
`scrollContainer`	`RefObject<HTMLElement \| null>` The element that scrolls under the header. Default: the page.	–
Other props pass through: extends `ComponentProps<'header'>`.

AppHeaderSearch

AppHeaderSearch props
Prop	Type	Default
`placeholder`	`string` The field-like label. default "Search…"	`"Search…"`
`shortcut`	`string \| false` The key shown with ⌘ / Ctrl, matching the palette's `shortcut`. default 'k'	`'k'`
`variant`	`ButtonVariant` `'default''danger''ghost''outline''link''secondary'` `default \| secondary \| outline \| ghost \| danger \| link`.	–
`loading`	`boolean` Swaps the label for a spinner without changing the button's width, sets aria-busy, and blocks presses while keeping keyboard focus on the button. Pass it (even as `false`) on any button that can load, so its live region exists before the first announcement. Without it, a click handler that returns a promise puts the button in this state until the promise settles; an explicit `loading` (even `false`) wins. For a success or error label after the work, use AsyncButton.	–
`loadingLabel`	`string` Announced when loading starts. default "Loading"	`"Loading"`
`size`	`'default' \| 'sm' \| 'lg' \| 'xs' \| 'icon' \| 'icon-xs' \| 'icon-sm' \| 'icon-lg'`	–
`sound`	`boolean` With sound on (`YoujProvider`’s `sound`), the button plays `tap` as it's pressed. `false` keeps this one silent. default true	`true`

It takes the rest of Button's props, such as onClick.

AppHeaderMenu

AppHeaderMenu props
Prop	Type	Default
`title`	`string` Names the drawer and its navigation. default "Menu"	`"Menu"`
`open`	`boolean`	–
`defaultOpen`	`boolean` default false	`false`
`onOpenChange`	`(open: boolean) => void`	–
`header`	`ReactNode` Shown above the links, e.g. the brand or a workspace switcher.	–
`footer`	`ReactNode` Pinned to the bottom of the drawer, e.g. sign-in buttons.	–
`className`	`string`	–
`children`Required	`ReactNode` The drawer's navigation: AppHeaderMenuLink rows, groups, anything.	–

AppHeaderMenuLink

AppHeaderMenuLink props
Prop	Type	Default
`active`	`boolean` The current page. default false	`false`
Other props pass through: extends `useRender.ComponentProps<'a'>`.

AppHeaderBrand takes an anchor's props and render. AppHeaderNav and AppHeaderActions are divs.

MotionCondense, relax, thresholds… · reduced motion

Motion

Motion tokens
Moment	Tokens	Value
Condenseheight 8px shorter, surface, blur, hairline and shadow, together	`duration.baseease.standard` 220ms · cubic-bezier(0.2, 0, 0, 1)	220mscubic-bezier(0.2, 0, 0, 1)
Relaxthe same properties back, from wherever they are	`duration.baseease.standard` 220ms · cubic-bezier(0.2, 0, 0, 1)	220mscubic-bezier(0.2, 0, 0, 1)
Thresholdscondenses past 24px, relaxes under 8px	no token hysteresis	hysteresis
Hamburger to crossthe outer bars slide to the middle as the middle one fades (`MenuIcon`)	`duration.fastease.standard` 140ms · cubic-bezier(0.2, 0, 0, 1)	140mscubic-bezier(0.2, 0, 0, 1)
Cross turns45° each way, once the bars have met	`duration.baseease.standard` 220ms · cubic-bezier(0.2, 0, 0, 1)	220mscubic-bezier(0.2, 0, 0, 1)
Sheet infrom the inline end (`yj-sheet-*`)	`duration.slowease.enter` 340ms · cubic-bezier(0.16, 1, 0.3, 1)	340mscubic-bezier(0.16, 1, 0.3, 1)
Sheet out	`duration.baseease.exit` 220ms · cubic-bezier(0.4, 0, 1, 1)	220mscubic-bezier(0.4, 0, 1, 1)
Menu link hoverbackground and text colors	`duration.fastease.standard` 140ms · cubic-bezier(0.2, 0, 0, 1)	140mscubic-bezier(0.2, 0, 0, 1)

Reduced motion

The bar condenses and relaxes at once. The hamburger swaps to a cross and the sheet appears without sliding.

Reduced motion

The bar takes its condensed or relaxed state at once, with no height, blur or shadow transition. On phones the hamburger turns straight into a cross and the sheet appears without sliding in. Focus handling and the thresholds are unchanged.

AccessibilityKeyboard, ARIA, focus