Skip to main content

    AppHeader

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

    OverviewPropertiesUsage

    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.

    CodeSandbox
    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.

    CodeSandbox

    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.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.

    CodeSandbox

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

    CodeSandbox

    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 now AppHeader.Navigation
    • AppHeader.NavItem is now AppHeader.NavigationItem
    • AppHeader.AppNavLink is now AppHeader.Logo
    CodeSandbox

    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.

    CodeSandbox

    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.

    CodeSandbox

    You can read more about the HelpMenu in the HelpMenu docs.

    Still have questions?
    Find answers in the Dynatrace Community