Top Header Desktop

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>
  }
/>

Examples

Default

A basic desktop header with brand, nav, and trailing actions.

Enterprise dashboard

Icon-labelled nav items, ghost icon actions, and a primary CTA — an app header with everything in reach and still fully visible.

Dropdown menu

A nav item that opens a hover/focus dropdown of products with icons and descriptions — composed from our NavigationMenu.

Mega menu

A full-width mega menu with a two-column product grid and a promotional footer card — for marketing-style navigation.

Variants

Six visual styles — here filled, elevated, primary, on-color, and blur.

Nav Positions

Place the nav slot at the start, center, or end of the bar.

With Search

Add the search slot to fill the flex-1 middle zone — an app-shell layout.

Sizes

Five height and padding scales from xs to xl.

Loading

The built-in skeleton mirrors the header layout to avoid content shift.

API Reference

TopHeaderDesktop

TopHeaderDesktopBrand

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

TopHeaderDesktopNavList

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

TopHeaderDesktopNavItem

<a> styled as a nav link.

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.

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.

TopHeaderDesktopAvatar

Avatar <button> with image or initials fallback.

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.

Keyboard Navigation

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)