AppHeader

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

Import

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.

CodeSandbox

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.

CodeSandbox

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.

CodeSandbox

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.

CodeSandbox

Hide the app icon

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

CodeSandbox

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.

CodeSandbox

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.

CodeSandbox

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.

CodeSandbox

Props

AppHeaderProps

extends,

Name	Type	Default	Description
children?		-	Elements to be displayed in the AppHeader.

AppHeader.AppNavLink

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

AppNavLinkProps

Signature:

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

AppHeader.AppIcon

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

AppIconProps

extends, , ,

Name	Type	Default	Description
src?		-	The path to the app icon. If not specified, the icon from the app registry is retrieved automatically.
alt?		-	The alternative text representation for the image when it's not loaded. If not specified, the app name is used.

AppHeader.NavItems

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

AppHeaderNavItemsProps

extends, ,

AppHeader.NavItem

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

NavItemProps

Signature:

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

AppHeader.ActionItems

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

AppHeaderActionItemsProps

extends, ,

AppHeader.ActionItemGroup

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

GroupProps

extends, ,

AppHeader.ActionButton

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

AppHeaderActionButtonProps

Signature:

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