# Current situation

This is a follow-up of ##57025 . 

We now have a standardized component for PageHeaders and SubHeaders that are already used in parts of the application. Because of that we currently have inconsistent headers throughout the application.

# Acceptance

## Solution

**PageHeader**

* All pages of the application uses the PageHeader Primer component following the designs provided.

* Limit the actions in the PageHeader to the "View or query" related actions (eg. Favourite, share, change between view types...).

* The header will always be the default size, not the large one.

* Follow this rules when it comes to breadcrumb rules:

* **For index or list pages**, display a navigational breadcrumb, including the containing the project (first element) and the groups of the sidebar (inside of the last element):

* eg. Projects / {Project list}

* eg. {Project A} / Members / Work package shares: Edit rights

* eg. {Project A} / Meetings / Upcoming meetings

* **For settings pages**, display a navigational breadcrumb including the project:

* eg. Administration / File storages / {Storage name}

* eg. My account / Email reminders

* **For individual work packages**, display only a hierarchical breadcrumb if there are parents (like today).

* **For individual meetings:** display a navigational breadcrumb, including the the project.

* **For calendars and team planners:** display a navigational breadcrumb, including the the project and considering the calendars/team planners created as views and adding an sidebar entry for "all":

* eg. OpenProject / Calendars / All calendars

* eg. OpenProject / Calendars / Favourite: {Calendar name}

* **For wikis:** display a navigational breadcrumb, including the the project:

* eg. OpenProject / Wiki / {Wiki page name} / {Wiki sub-page name}

* In mobile the breadcrumbs will be substituted with the level on top and an arrow back.

* Remove all back buttons (the user can use the browser back button or the breadcrumbs instead).


**SubHeader**

* All pages where is required will now use SubHeaders that will contain the most relevant actions of the page in a Primer style.

* Check the designs and mockups for references of each specific SubHeader per page.

* In the pages where there is lists or tables bellow the SubHeaders will contain the filters and creation actions.

* SubHeaders might change in the same page context if there is actions that are depending on the selection of the content (eg. multi select of work packages...)

* Date navigations (eg. Calendars or Team Planners) will also be part of the subHeaders.


# Pages to change

* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Project overview
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Roadmap
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Activity
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Backlogs
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Budget
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion News
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Forums
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Documents
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Wiki pages
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Time and costs
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Project settings Begin of the insertion

End of the insertion Begin of the deletion



End of the deletion # Visuals and Figma

**PageHeader**

[https://www.figma.com/file/UeRGKwv1lSKDpribyWROe3/Page-Headers-concept?type=design&node-id=0-1&mode=design](https://www.figma.com/file/UeRGKwv1lSKDpribyWROe3/Page-Headers-concept?type=design&node-id=0-1&mode=design)

**SubHeader**

https://www.figma.com/file/tUkyiLDn5ax7Q9DAhxlS69/Sub-headers-concept?type=design&node-id=0-1&mode=design