Title
Title
is a component that renders the title
element on the server, and hydrates it on the client.
tsx
<Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title
>My Site</Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title
>
tsx
<Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title
>My Site</Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title
>
Usage
Setting the title for your site
root.tsx
tsx
export default function Rootfunction Root(): JSX.Element
() { return (
<Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
lang(property) JSX.HTMLAttributes<HTMLHtmlElement>.lang?: string | undefined
="en"> <Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
> <Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title
>Default Application Title</Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title
> </Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
> </Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
> );
}
root.tsx
tsx
export default function Rootfunction Root(): JSX.Element
() { return (
<Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
lang(property) JSX.HTMLAttributes<HTMLHtmlElement>.lang?: string | undefined
="en"> <Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
> <Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title
>Default Application Title</Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title
> </Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
> </Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import 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 MyPagefunction MyPage(): JSX.Element
() { return (
<>
<Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title
>My Page Title</Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title
> <h1(property) JSX.HTMLElementTags.h1: JSX.HTMLAttributes<HTMLHeadingElement>
>My Super Cool Page</h1(property) JSX.HTMLElementTags.h1: JSX.HTMLAttributes<HTMLHeadingElement>
> </>
);
}
src/routes/profile.tsx
tsx
export default function MyPagefunction MyPage(): JSX.Element
() { return (
<>
<Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title
>My Page Title</Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title
> <h1(property) JSX.HTMLElementTags.h1: JSX.HTMLAttributes<HTMLHeadingElement>
>My Super Cool Page</h1(property) JSX.HTMLElementTags.h1: JSX.HTMLAttributes<HTMLHeadingElement>
> </>
);
}