Page titles

• How-to guide
• 3-min read

Page titles appear in the browser tab and help users identify the active view when multiple tabs are open. Setting descriptive page titles improves usability and accessibility across your app, embedded widgets, and add-ons.

Note

Only call usePageTitle for views with a persistent URL. Updating the title for transient views—overlays, modals, or intermediate states that don't persist in browser history—causes confusion when users navigate back in history. Add-on modals are an exception; for more information, see Set modal titles for add-ons.

Set page titles for apps

The app shell composes the final browser tab title in the following format:

<page title> - <app name> - <tenant ID> - Dynatrace

To set the page title from any page in your app, add the usePageTitle hook to your project:

ui/hooks/usePageTitle.ts

import { useEffect } from 'react';

export function usePageTitle(title: string | undefined): void {
  useEffect(() => {
    if (title !== undefined) {
      document.title = title;
    }
  }, [title]);
}

Then call the hook in your page components:

ui/app/pages/Overview.tsx

import React from 'react';
import { usePageTitle } from '../hooks/usePageTitle';

export const Overview = () => {
  usePageTitle('Overview');

  return <div>...</div>;
};

The usePageTitle hook doesn't reset document.title on unmount. If a page doesn't call usePageTitle, the previous title remains in the browser tab.

Set page titles for widgets

Widgets use the same usePageTitle hook as apps. Call it in the widget's root component to set a descriptive title for the browser tab when the widget is displayed.

ui/widgets/MyWidget.tsx

import React from 'react';
import { usePageTitle } from '../hooks/usePageTitle';

export const MyWidget = () => {
  usePageTitle('My widget');

  return <div>...</div>;
};