App navigation

App Header

A sticky application top navigation bar with logo, nav links that highlight the active route, and a right-side actions slot. Collapses to a sheet on mobile.

MyApp

import { AppHeader } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add app-header

Import

import.tsx

import { AppHeader } from "@aetherstack/blocks"

Usage

app-header.tsx

import { AppHeader } from "@aetherstack/blocks"
import { Button } from "@aetherstack/ui"

export default function AppLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <AppHeader
        appName="MyApp"
        navItems={[
          { label: "Dashboard", href: "/dashboard", active: true },
          { label: "Projects", href: "/projects" },
          { label: "Settings", href: "/settings" },
        ]}
        actions={
          <>
            <Button variant="outline" size="sm">Invite</Button>
            <Button size="sm">Upgrade</Button>
          </>
        }
      />
      {children}
    </>
  )
}

Props

Prop	Type	Default	Description
appName	string	—	Application name text.
logo	ReactNode	—	Custom logo element.
navItems	{ label: string; href: string; active?: boolean }[]	—	Navigation items. Set active: true on the current route.
actions	ReactNode	—	Right-side action slot (buttons, avatar, etc.).
className	string	—	Additional classes on the header element.

* Required

Accessibility

→Active nav item receives aria-current='page'.
→Desktop nav wrapped in <nav aria-label='Main navigation'>.
→Mobile toggle button includes aria-label='Open navigation'.