Top Header Desktop

Desktop navigation bar with brand, nav, search, and actions slots. Six variants, five sizes, six rounded options, three nav-position modes (start/center/end), max-width containment, bordered, sticky, skeleton, and full RTL support.

Playground

Installation

pnpm add @tessinaui/ui

Usage

import {
  TopHeaderDesktop,
  TopHeaderDesktopBrand,
  TopHeaderDesktopNavList,
  TopHeaderDesktopNavItem,
  TopHeaderDesktopSearch,
  TopHeaderDesktopActions,
  TopHeaderDesktopIconButton,
  TopHeaderDesktopAvatar,
} from "@tessinaui/ui";

<TopHeaderDesktop
  bordered
  brand={
    <TopHeaderDesktopBrand href="/">
      <img src="/logo.svg" alt="Logo" className="h-8 w-8" />
    </TopHeaderDesktopBrand>
  }
  nav={
    <TopHeaderDesktopNavList>
      <TopHeaderDesktopNavItem active href="/">Home</TopHeaderDesktopNavItem>
      <TopHeaderDesktopNavItem href="/about">About</TopHeaderDesktopNavItem>
    </TopHeaderDesktopNavList>
  }
  search={
    <TopHeaderDesktopSearch
      icon={<Search className="size-4" />}
      placeholder="Search…"
    />
  }
  actions={
    <TopHeaderDesktopActions>
      <TopHeaderDesktopIconButton aria-label="Notifications">
        <Bell className="size-4.5" />
      </TopHeaderDesktopIconButton>
      <TopHeaderDesktopAvatar initials="JD" aria-label="Account" />
    </TopHeaderDesktopActions>
  }
/>

Showcase

API Reference

TopHeaderDesktop

Prop	Type	Default	Description
`variant`	`"filled" \| "elevated" \| "transparent" \| "primary" \| "on-color" \| "blur"`	`"filled"`	Visual style
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Height and padding scale
`rounded`	`"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full"`	`"none"`	Bottom corner rounding
`brand`	`ReactNode`	—	Leading brand / logo slot
`nav`	`ReactNode`	—	Navigation slot — position controlled by `navPosition`
`navPosition`	`"start" \| "center" \| "end"`	`"start"`	Where to render the nav slot
`search`	`ReactNode`	—	Search bar slot — fills the flex-1 middle zone
`actions`	`ReactNode`	—	Trailing actions — icon buttons, CTA, avatar
`bordered`	`boolean`	`false`	Render a subtle `border-b border-border`
`sticky`	`boolean`	`false`	Apply `sticky top-0 z-40`
`maxWidth`	`"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "full"`	`"full"`	Max-width of the inner content row
`skeleton`	`boolean`	`false`	Show animated skeleton
`dir`	`"ltr" \| "rtl"`	—	Text and layout direction

TopHeaderDesktopBrand

<a> element with consistent focus ring and flex gap.

Prop	Type	Default	Description
`name`	`string`	—	Optional brand name rendered next to `children`
`href`	`string`	—	Link destination

TopHeaderDesktopNavList

<ul> container for nav items. Accepts TopHeaderDesktopNavItem and TopHeaderDesktopNavDivider children.

TopHeaderDesktopNavItem

<a> styled as a nav link.

Prop	Type	Default	Description
`active`	`boolean`	`false`	Mark as current page (`aria-current="page"`, filled background)
`hasDropdown`	`boolean`	`false`	Show a chevron icon (visual only — wire up your own popover)

TopHeaderDesktopNavDivider

<li> vertical separator (w-px h-4 bg-border) between nav items.

TopHeaderDesktopSearch

Built-in search input with pill shape and optional leading icon.

Prop	Type	Default	Description
`icon`	`ReactNode`	—	Leading icon (e.g. `<Search className="size-4" />`)
`placeholder`	`string`	`"Search…"`	Input placeholder
`containerClassName`	`string`	—	Override the wrapper div class (e.g. `"max-w-sm"`)

All native <input> attributes are forwarded.

TopHeaderDesktopActions

<div> flex row wrapper for trailing action elements.

TopHeaderDesktopIconButton

<button> sized 36×36px, rounded-full, with muted icon coloring on rest.

Prop	Type	Required	Description
`aria-label`	`string`	Yes	Visually hidden label for screen readers

TopHeaderDesktopAvatar

Avatar <button> with image or initials fallback.

Prop	Type	Default	Description
`src`	`string`	—	Image URL — renders `<img>` when provided
`initials`	`string`	—	Short text shown when no image
`aria-label`	`string`	`"Account"`	Visually hidden label

Variants

Filled (default)

Solid bg-background surface. Standard app bar.

Elevated

Same as filled with shadow-sm. Use when the header floats above scrollable content.

Transparent

No background. Overlays hero images or gradient banners — pass className="absolute inset-x-0 top-0" on the header.

Primary

Brand-coloured background. Override nav item and icon classes with text-on-primary tokens.

On Color

Dark foreground background with light text. Ideal for dark-mode-first or inverted hero sections.

Blur

Frosted-glass effect (backdrop-blur-md). Best combined with sticky and bordered.

Nav Position Modes

start (default)

Nav renders immediately after the brand. Search fills the remaining middle space. Matches Mobbin, Dribbble, Paraform.

center

Nav is absolutely centred in the header. Search renders in the trailing section. Matches Apple.

end

Nav renders in the trailing section, before actions. Spacer fills the middle. Good for minimal two-item menus.

Layout Patterns

Search-forward (Mobbin / Dribbble)

navPosition="start" + prominent search slot. Nav links are secondary; search is the primary interaction.

Marketing (Wise / Linear)

navPosition="start" + no search + actions with Log in / Sign up buttons.

Centred nav (Apple)

navPosition="center" + icon-only actions. Nav is the primary interaction.

App shell

navPosition="start" + full-width search + rich actions (notifications, avatar). Use maxWidth="2xl" with a constrained inner row.

Key	Action
`Tab`	Move focus between interactive elements
`Enter` / `Space`	Activate focused link or button

Accessibility

Uses <header role="banner"> as a landmark
<nav aria-label="Main"> wraps all nav slots
Active nav item gets aria-current="page"
All icon buttons require a visible aria-label
Avatar button defaults to aria-label="Account"
dir="rtl" flips the entire layout via CSS logical properties
Focus rings visible on keyboard navigation (focus-visible:ring-2)

Playground

Installation

pnpm add @tessinaui/ui

Usage

import {
  TopHeaderDesktop,
  TopHeaderDesktopBrand,
  TopHeaderDesktopNavList,
  TopHeaderDesktopNavItem,
  TopHeaderDesktopSearch,
  TopHeaderDesktopActions,
  TopHeaderDesktopIconButton,
  TopHeaderDesktopAvatar,
} from "@tessinaui/ui";

<TopHeaderDesktop
  bordered
  brand={
    <TopHeaderDesktopBrand href="/">
      <img src="/logo.svg" alt="Logo" className="h-8 w-8" />
    </TopHeaderDesktopBrand>
  }
  nav={
    <TopHeaderDesktopNavList>
      <TopHeaderDesktopNavItem active href="/">Home</TopHeaderDesktopNavItem>
      <TopHeaderDesktopNavItem href="/about">About</TopHeaderDesktopNavItem>
    </TopHeaderDesktopNavList>
  }
  search={
    <TopHeaderDesktopSearch
      icon={<Search className="size-4" />}
      placeholder="Search…"
    />
  }
  actions={
    <TopHeaderDesktopActions>
      <TopHeaderDesktopIconButton aria-label="Notifications">
        <Bell className="size-4.5" />
      </TopHeaderDesktopIconButton>
      <TopHeaderDesktopAvatar initials="JD" aria-label="Account" />
    </TopHeaderDesktopActions>
  }
/>

Showcase

API Reference

TopHeaderDesktop

Prop	Type	Default	Description
`variant`	`"filled" \| "elevated" \| "transparent" \| "primary" \| "on-color" \| "blur"`	`"filled"`	Visual style
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Height and padding scale
`rounded`	`"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full"`	`"none"`	Bottom corner rounding
`brand`	`ReactNode`	—	Leading brand / logo slot
`nav`	`ReactNode`	—	Navigation slot — position controlled by `navPosition`
`navPosition`	`"start" \| "center" \| "end"`	`"start"`	Where to render the nav slot
`search`	`ReactNode`	—	Search bar slot — fills the flex-1 middle zone
`actions`	`ReactNode`	—	Trailing actions — icon buttons, CTA, avatar
`bordered`	`boolean`	`false`	Render a subtle `border-b border-border`
`sticky`	`boolean`	`false`	Apply `sticky top-0 z-40`
`maxWidth`	`"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "full"`	`"full"`	Max-width of the inner content row
`skeleton`	`boolean`	`false`	Show animated skeleton
`dir`	`"ltr" \| "rtl"`	—	Text and layout direction

TopHeaderDesktopBrand

<a> element with consistent focus ring and flex gap.

Prop	Type	Default	Description
`name`	`string`	—	Optional brand name rendered next to `children`
`href`	`string`	—	Link destination

TopHeaderDesktopNavList

<ul> container for nav items. Accepts TopHeaderDesktopNavItem and TopHeaderDesktopNavDivider children.

TopHeaderDesktopNavItem

<a> styled as a nav link.

Prop	Type	Default	Description
`active`	`boolean`	`false`	Mark as current page (`aria-current="page"`, filled background)
`hasDropdown`	`boolean`	`false`	Show a chevron icon (visual only — wire up your own popover)

TopHeaderDesktopNavDivider

<li> vertical separator (w-px h-4 bg-border) between nav items.

TopHeaderDesktopSearch

Built-in search input with pill shape and optional leading icon.

Prop	Type	Default	Description
`icon`	`ReactNode`	—	Leading icon (e.g. `<Search className="size-4" />`)
`placeholder`	`string`	`"Search…"`	Input placeholder
`containerClassName`	`string`	—	Override the wrapper div class (e.g. `"max-w-sm"`)

All native <input> attributes are forwarded.

TopHeaderDesktopActions

<div> flex row wrapper for trailing action elements.

TopHeaderDesktopIconButton

<button> sized 36×36px, rounded-full, with muted icon coloring on rest.

Prop	Type	Required	Description
`aria-label`	`string`	Yes	Visually hidden label for screen readers

TopHeaderDesktopAvatar

Avatar <button> with image or initials fallback.

Prop	Type	Default	Description
`src`	`string`	—	Image URL — renders `<img>` when provided
`initials`	`string`	—	Short text shown when no image
`aria-label`	`string`	`"Account"`	Visually hidden label

Key	Action
`Tab`	Move focus between interactive elements
`Enter` / `Space`	Activate focused link or button

Accessibility

Uses <header role="banner"> as a landmark
<nav aria-label="Main"> wraps all nav slots
Active nav item gets aria-current="page"
All icon buttons require a visible aria-label
Avatar button defaults to aria-label="Account"
dir="rtl" flips the entire layout via CSS logical properties
Focus rings visible on keyboard navigation (focus-visible:ring-2)

Top Header Desktop

On this page

Top Header Desktop

On this page