Page header as a framework component

Hi all,
I’m working on an update for a component within our responsive framework.

The current solution is providing within the component:

    • navigation tools (ex. back button)
    • context actions (ex. bulk actions for table items)
    • page title
    • border bottom

We want to simplify the component (we want to provide a better semantic code as well) and are thinking to develop this solution:

    • navigation container with back button
    • Header container with title and border
    • Content container with all the items belonging to the page/view content

We have a couple of open topics (mostly related to the extra small breakpoint) so far:

  • we are consuming initial room because the back button is in a dedicated container (DIV)
  • the context actions button can be alone in some screens and again we are consuming room for a button that is not a primary CTA

What do you think?
Have you face something similar in your experience?
Do you have any examples in other we apps?

Looking forward to reading your comments :wink:

1 Like

A couple of questions for you:

  • Is this a web app, or a native app?
  • Does the back button do anything special that one might not expect from a common back button in a browser setting?
1 Like

hi @dougcollins

Is this a web app, or a native app?
No is a web-app built with html css and JS, the responsiveness is based on Bootstrap

Does the back button do anything special that one might not expect from a common back button in a browser setting?
Due to the fact that, as I said, it is a framework we need a custom back button because with third parties views the browser back button is not working as users expect.

We also did some usability test (Cancel button vs back navigation) and according the test results we decided to provide the button and a configuration file that allows customer to show or to hide it. This is the reason why we are going to re-design the header, we want to avoid some weird UI behavior with both configurations