Skip to main content


The AppHeader component is a responsive header with navigational and action items.


import { AppHeader } from '@dynatrace/strato-components-preview/layouts';

Use cases

The AppHeader displays the logo and application name by default. Clicking the logo or name redirects to the root of the application. However, if you're using a routing library and have a basename defined, you'll need to specify the URL to home yourself. The header contains a navigation section on the left and an actions section on the right. These are responsive, so the action items collapse into an overlay as soon as there isn't enough space. If there's still not enough space, the navigation section collapses as well and the burger menu icon replaces the logo.


Define the home URL

You can add the AppHeader.AppNavLink, which is an anchor by default, and specify the link that navigates to home by setting the href prop.


If you're using a library like react-router-dom, you can polymorph the AppHeader.AppNavLink to a NavLink for instance, so that the basename is taken into consideration when routing.


Customize the app name and icon

You can customize the app name by setting the appName prop to a specific string on the AppHeader.AppNavLink component. You can also customize the app icon by adding the AppHeader.AppIcon with a src prop inside the AppHeader.AppNavLink.


Hide the app icon

You can hide the app icon by adding the AppHeader.AppNavLink without any content.


Add navigation items

You can add items to the navigation section with any routing library by polymorphing the AppHeader.NavItem. By default, the nav items are anchors that accept href props for defining the URL they should navigate to.

However, if you use a routing library, like react-router-dom for instance, you can polymorph the AppHeader.NavItem to either a NavLink or Link. You would then need to pass the route to the to prop of the NavItem component.

If you use the Link, you also need to detect the item that is currently active if the route matches the current path, as well as specify the isSelected property to highlight it. If you're using NavLink, react-router-dom automatically adds the active class to the item, used for styling, so the isSelected prop is not necessary in that case.


Polymorph nav items to custom component

You can create a custom component that you can then reuse to polymorph the nav items if you want to reduce code duplication and reuse props. If you want to preserve the overflow behavior, then it's important to spread the props to the custom component.


Add action items

In the actions section, you can add groups of actions using the AppHeader.ActionItemGroup component or ActionButton components. Groups are visually separated by a divider. You can also set the showLabel to false if you want to hide the text inside the ActionButton in the expanded version and only show it when the actions are collapsed. However, this is ignored if there is no prefixIcon set, as it would otherwise be an empty button with poor accessibility in the expanded version.




-Elements to be displayed in the AppHeader.

You can use the AppHeader.AppNavLink component to render a customizable link that navigates to your app's home page.



export declare type AppNavLinkProps<E extends > = <E, >;


You can use the AppHeader.AppIcon component to render the icon used for the app on the platform.


extends, , ,
-The path to the app icon. If not specified, the icon from the app registry is retrieved automatically.
-The alternative text representation for the image when it's not loaded. If not specified, the app name is used.


You can use the AppHeader.NavItems component to render a group of navigational items (AppHeader.NavItems).


extends, ,


You can use the AppHeader.NavItem component to render a navigational item inside the AppHeader.NavItems group.



export declare type NavItemProps<E extends .> = <E, >;


You can use the AppHeader.ActionItems component to render either ActionButtons or a group of ActionButtons.


extends, ,


You can use the AppHeader.ActionItemGroup component to render a group of action items.


extends, ,


You can use the AppHeader.ActionButton component to render a button inside the action items section or inside a group of action buttons.



export declare type AppHeaderActionButtonProps<E extends > = <E, >;
Still have questions?
Find answers in the Dynatrace Community