AppHeader

AppHeader organizes page context and actions at the top of an application shell. Place it inside AppLayout; see Layout for the complete shell.

Code

import {
  AppHeader,
  AppHeaderLeading,
  AppHeaderNotifications,
  AppHeaderTrailing,
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@falcon/ui-kit";
import { useId, useState } from "react";

export function Example() {
  const [notificationsOpen, setNotificationsOpen] = useState(false);
  const notificationsId = useId();

  return (
    <div className="tw:w-full tw:overflow-hidden tw:rounded-lg tw:border tw:border-border tw:bg-background">
      <AppHeader>
        <AppHeaderLeading>
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbLink href="/orders">Orders</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbPage>Order 1042</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </AppHeaderLeading>

        <AppHeaderTrailing>
          <AppHeaderNotifications
            aria-controls={notificationsId}
            aria-expanded={notificationsOpen}
            aria-label="Notifications"
            count={3}
            onClick={() => setNotificationsOpen((open) => !open)}
          />
        </AppHeaderTrailing>
      </AppHeader>

      <section
        id={notificationsId}
        aria-label="Recent notifications"
        className="tw:p-4"
        hidden={!notificationsOpen}
      >
        <ul className="tw:m-0 tw:grid tw:list-none tw:gap-2 tw:p-0 tw:text-sm">
          <li>
            <a
              className="tw:text-primary tw:hover:underline"
              href="/orders/1042"
            >
              Order 1042 is ready for review
            </a>
          </li>
          <li>
            <a className="tw:text-primary tw:hover:underline" href="/inventory">
              Three products are low in stock
            </a>
          </li>
          <li>
            <a className="tw:text-primary tw:hover:underline" href="/accounts">
              A new account needs approval
            </a>
          </li>
        </ul>
      </section>
    </div>
  );
}

Composition

AppHeader
├── AppHeaderLeading
├── AppHeaderContent
└── AppHeaderTrailing
    └── AppHeaderNotifications

Place the regions you need directly inside AppHeader. They do not require a provider, but a SidebarTrigger in AppHeaderLeading must be inside SidebarProvider; Layout demonstrates that shell boundary and the leading region’s responsive behavior.

Notification actions

AppHeaderNotifications provides the notification control, not the notification experience. Give it an accessible name and connect it to the product’s notification disclosure or action; the count is not a sufficient label.

API

AppHeader

Contains page context and actions at the top of the application shell. Renders a <header> element and accepts standard <header> props.

AppHeaderContent

Contains the header’s primary content. Renders a <div> element and accepts standard <div> props.

AppHeaderLeading

Contains the header’s leading content. Renders a <div> element and accepts standard <div> props.

AppHeaderNotifications

Triggers the product’s notification experience, with an optional count. Renders a Button as a <button> element by default and accepts Button props except children.

Props

className

className?: string

CSS class applied to the element.

count

count?: number

Notification count. Omit or pass 0 to hide it.

focusableWhenDisabled

focusableWhenDisabled?: boolean

Whether a disabled button stays focusable, so keyboard and screen reader users can still reach it and read its label.

nativeButton

nativeButton?: boolean

Whether the element passed to render is a native button. Set to false when rendering another element.

render

render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a React element or a function that returns the element to render.

size

size?: "xs" | "sm" | "lg" | "default" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null

Controls the button’s size. The icon sizes are square and are for buttons whose only child is an icon.

style

style?: React.CSSProperties | ((state: ButtonState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

variant

variant?: "outline" | "link" | "secondary" | "default" | "ghost" | "destructive" | null = "ghost"

Controls the button’s appearance only, never its behavior. Defaults to "ghost".

AppHeaderTrailing

Contains the header’s trailing actions. Renders a <div> element and accepts standard <div> props.