TitlePortal

Render target for <Title>. Reserves the DOM slot in the app bar where page titles are teleported.

The default <Layout> includes a <TitlePortal> inside <AppBar>. Re-use it when composing a custom header.

Usage

import { TitlePortal } from "@/components/admin";
 
const CustomHeader = () => (
  <header className="flex h-12 items-center px-4">
    <TitlePortal />
  </header>
);

Pair it with <Title> (rendered anywhere in the page tree) to populate the slot:

import { Title } from "@/components/admin";
 
const Dashboard = () => (
  <>
    <Title title="Dashboard" />
    <div>Welcome!</div>
  </>
);

Props

Additional props are forwarded to the underlying <div> element.

The portal target uses a stable DOM id (ra-title-portal) that <Title> reads via createPortal. Do not render more than one <TitlePortal> on the page.