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.

On the right end of the AppHeader, there is a AppHeader.Menus component which should contain the settings and the HelpMenu. If the app has settings, they should be reachable from the AppHeader. Depending on if there is one or multiple places where the settings can be configured a Button or a Menu should be used. The HelpMenu has multiple entries that should be set if it is applicable to the app. Some of the entries need to be handled by each app separately, for some there is a default behavior available, which can be overriden.

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

With routing libraries

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

With 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

New Navigation

You can add navigation to your AppHeader by using the AppHeader.Navigation slot. It accepts AppHeader.Logo and AppHeader.NavigationItem as child components. The navigation is responsive by default and will collapse into a hamburger menu. The AppHeader.Logo is always displayed.

CodeSandbox