AppHeader

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

OverviewPropertiesUsage

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