AppHeader

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

OverviewPropertiesUsage

When to use

• When your app has multiple pages or sections that users navigate between.
• To provide persistent access to app-level actions such as settings, help, or notifications from anywhere in the app.

When not to use

• For standalone pages or simple single-page apps with no top-level navigation.

AppNavLink (Home button)

• Use AppNavLink to ensure that users can quickly return to your app's home from any place within the app.
• Always link AppNavLink to your app's home page.
• Include 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 AppNavLink to it. This 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. If you use icons, ensure all items have them.

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.