solidjs.com

Title

Title is a component that renders the title element on the server, and hydrates it on the client.
tsx
<Title>My Site</Title>
tsx
<Title>My Site</Title>

Usage

Setting the title for your site

root.tsx
tsx
export default function Root() {
  return (
    <Html lang="en">
      <Head>
        <Title>Default Application Title</Title>
      </Head>
    </Html>
  );
}
root.tsx
tsx
export default function Root() {
  return (
    <Html lang="en">
      <Head>
        <Title>Default Application Title</Title>
      </Head>
    </Html>
  );
}

The Title tag contains the title for the page that is rendered in the browsers top tab bar. It is a wrapper of the title element and is a re-export from @solidjs/meta.

Setting the title for a specific page

These are typically placed in the Head element but can also be placed throughout your application code to overwrite the current title. A Title lower in the tree will override a parent's title.

Using a Title in a route component will only display that title when the user visits this page.

src/routes/profile.tsx
tsx
export default function MyPage() {
  return (
    <>
      <Title>My Page Title</Title>
      <h1>My Super Cool Page</h1>
    </>
  );
}
src/routes/profile.tsx
tsx
export default function MyPage() {
  return (
    <>
      <Title>My Page Title</Title>
      <h1>My Super Cool Page</h1>
    </>
  );
}