AppHeader
The AppHeader component is a responsive header with navigation and action items.
Import
import { AppHeader } from '@dynatrace/strato-components-preview/layouts';
Use cases
By itself, the AppHeader
displays the configured application icon and name as
anchor tag, which links to the root of the application.
AppHeader.NavItems
, AppHeader.NavItem
and AppHeader.AppNavLink
have been
renamed for better discoverability.
The old names still work like before and can be used interchangeably. Read more.
App navigation
If your app has several high-level features to explore data or personas with
different user goals, levels of knowledge, or access, use AppHeader.Navigation
to segment the flows. It will collapse into a menu, if there isn't enough space
in the AppHeader.
Setting active styles on NavigationItem
Set isSelected
on AppHeader.NavigationItem
to apply the correct styles.
Usage with routing libraries
By default, navigation items and the logo link are rendered as <a href="...">
tags. You can use the as
prop on AppHeader.Logo
and
AppHeader.NavigationItem
s to customize which component is rendered. If you
want to use a routing library like react-router-dom
you can set
as={NavLink}
.
react-router-dom
s NavLink
automatically adds an active
css class, so you
don't need to set isSelected
manually.
Customize the app Logo
The AppHeader.Logo
component allows you to customize the logos link, text and
icon. It needs to be placed inside AppHeader.Navigation
.
Note: Updated navigation component names
Navigation components have been renamed for better discoverability. While the old names still work we recommend migrating to the new component names, as the old ones will be deprecated in the future.
AppHeader.NavItems
is nowAppHeader.Navigation
AppHeader.NavItem
is nowAppHeader.NavigationItem
AppHeader.AppNavLink
is nowAppHeader.Logo
Use AppHeader.ActionItems
for app-wide actions
If your app needs to have one or a maximum of two actions always visible on any
page, consider using AppHeader.ActionItems
.
Provide a settings and HelpMenu button
To provide an app-specific help menu for users to find additional help and
information, render the HelpMenu
component within AppHeader.Menus
.
Optionally, you can also supply a custom settings button next to the HelpMenu
.