Skip to main content

AppHeader

    Use the AppHeader to provide a persistent responsive header with app navigation, home button, and global action items available throughout your app.

    OverviewPropertiesUsageChangelog

    Import​

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

    Demo​

    By itself, the AppHeader displays the configured application icon and name as anchor tag, which links to the root of the application.

    Note

    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.

    Set 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.NavigationItems 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-doms NavLink automatically adds an active css class, so you don't need to set isSelected manually.

    The AppHeader.Logo component allows you to customize the logos link, text and icon. It needs to be placed inside AppHeader.Navigation.

    Indicate release phase of app​

    Use the releasePhase prop on AppHeader.Logo to communicate the release phase of your app to users. The prop accepts 'preview', 'early-access', 'new', and 'deprecated', each displaying a correspondingly labelled chip next to the app name.

    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 settings and HelpMenu buttons​

    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.

    Read more about HelpMenu in the HelpMenu docs.

    Still have questions?
    Find answers in the Dynatrace Community