Balance Logo
Reckon Design System
Open playroom

App header

The AppHeader component serves as a consistent app header for all Reckon apps.


The app header expands to fill the container by using flexGrow:1. It is up to the consumer to provide an appropriate container.


Sets the name of the app in the banner.

Testing: testid is hard coded to app-header-app-name


Sets the version of the app in the user menu.

Testing: testid is hard coded to app-header-user-menu-dropdown-app-version


Renders a small icon next to the app name.

It will render a loading skeleton while the icon is undefined, assumed to be in loading.


Renders a user menu all the way to the right of the header. It contains things like user details and a dropdown menu for user management such as Settings.

Testing: The userMenu is a Dropdown under the hood with a hardcoded testid app-header-user-menu-dropdown. Testids for each menu item can be provided as per normal drop down item testing. See dropdown testing for more details.


All Reckon apps are powered by a book in the backend so it's important for the user to know which book they're working on. This app presents book info to the user.

Check the sample code below for more details.


  • Book name testid app-header-book-name
  • App name testid app-header-app-name


Provide a list of utility actions such as "Help" for the user to access quickly.


If the user has access to multiple apps in the Reckon ecosystem, providing a list of apps and the loading state to this prop will allow the user to switch between them.

Renders an empty state when apps list array is empty.

Error should be handled by consumers using alert dialogs.

The app switcher can be closed programatically by using the closeAppSwitcher function.

Testing: Apps are rendered using List under the hood with a hard coded testid app-header-app-switcher Testids can be passed to individual apps using the testid prop.


Provide a list of pages to render a horizontal navigation menu. The navigation items can be nested. You can provide as many pages as needed without worrying about horizontal real estate, the overflowing navigation items will collapse into a dropdown menu when it runs of of space.

Check the code sample below for more details.

Testing: Testids can be passed to individual pages and groups of pages using the testid prop.


If the pages prop has been provided, the selectedPage prop must be provided as well so the navigation menu can highlight the page the user is on.


Allows the user to access the most common features of your app by putting them in the header.

Testing: globalActions is a render slot that expects a Dropdown majority of the time which has testability built in. See dropdown testing for more details.


Below is the code sample with all the features of an AppHeader.

Testing: Testids have been used where possible.

Edit in Playroom
Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo