AppHeader

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

OverviewPropertiesUsage

AppNavLink (Home button)

• Use the AppNavLink to ensure that users can quickly return to your app's home at any time within the app.
• Always link the AppNavLink to your app's home page.
• Include the AppNavLink across the entire app and keep its target consistent.
• Include the app icon if available to create a better visual distinction from NavItems.

NavItems

• Use NavItems for main navigational items that must be accessible anytime within the app. Simple, single-page apps might not require NavItems.
• Include the same NavItems across the entire app and keep their target consistent.
• If you have more than one NavItem, always include the app's home as the first NavItem and link the AppNavLink to it. This strategy ensures a consistent navigation pattern across apps that works well on all screen sizes.
  • Avoid calling the first NavItem Home or Start. Instead, use a descriptive label.
  • If the app's home summarizes information or data from further parts of the app and acts as an entry point, consider calling it Overview.
• Avoid prefix icons for only some NavItems. Instead, ensure that all items have icons if you use any.

Action items

• Use action items for actions that should be accessible anytime within the app. They usually affect the entire app, such as settings, help, notifications, or a TimeframeSelector.
• Include the same action items across the entire app and keep their functionality consistent.