This style guide offers a variety of navigation options that should cover all major use cases for navigation. It’s critical that your app be easy to understand and that all starts with having a clear navigation.
The top-most navigation element on desktop-sized apps is referred to as the header. In our enterprise apps, we use the header to communicate the following:
- App name/brand
- Selected institution
- Authenticated user
- App switcher
Below this header, we’ll add the tab bar which includes the primary navigation links for our “Banno Product” app.
The tab bar attaches to the bottom of the viewport on mobile-size viewports. Resize your browser to see how the element transforms visually.
Below the navigation mentioned above, we introduce a page header. The page header layout element takes on the role of the header (mentioned above) for mobile-size viewports and it can usually be hidden on desktop-size viewports.
The page header can contain the following elements:
- Page title (required)
- App switcher (required unless back button is provided)
- Back button
- Primary action button
Resize your browser to see how the page header transforms between media queries. Buttons and the page title are automatically altered to look their best between all views. If you place a different component in the page header you’re responsible for changing it’s appearance between viewport sizes.
The toolbar replaces the tab bar in builder views and usually contains elements that describe a body of work. It uses the same elements as the header and tab bar to create content or links.
Action bars reveal actions that can be taken, typically against a selection of checkboxes. It slides up from the bottom of the viewport when triggered. It’s represented the same way across all media queries.