Content
View differences
Updated by Niels Lindenthal 7 months ago
**User Story**
**As** an OpenProject user
**I want to** have a consistent breadcrumb and page title system
**so that** I can easily navigate through my navigation and always know where I am and how I get to the pages I need to finish my job.
# **Acceptance criteria**
* Remove breadcrumb from these entry pages:
* Instance home
* Project home
* Administration home
* My Page
* Remove instance name from the breadcrumb (where breadcrumb is visible)
* Verify that this does not affect proper mobile navigation (eg. that it does not create creatre an infinite navigation loop)
* Change page title (PageHeader) on these entry pages:
* Instance home: "Home" → {Instance name}
* Project home: "Project home" → {Project name}
* Administration: "Overview" → "Administration"
* Sidebar titles for these pages remain as they are today (unchanged)
* For the pages without a breadcrumb, when the sidebar is collapsed, the "expand" button now goes before the page title instead
* Update PageHeader docs in LookBook to allow not displaying the PageHeader
## **Out of scope**
* Sidebar titles for these pages remain as they are today (unchanged)
* Angular pages (eg. Work package details)
* Other modules (eg. Meetings) will be handled separately
<br>
# **Archived**
* ~~**(1) Global home**~~
* ~~Breadcrumb: Remove breadcrumb (there is no need to have a breadcrumb there)~~
* ~~Page title:~~ `~~Application title~~`
* ~~Sidebar: "Home"~~
<figure class="image image_resized op-uc-figure" style="width:894px;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/791443/content"></div><figcaption class="op-uc-figure--description"><s>Status in 16.5</s></figcaption></figure>
* ~~**(2) Project home**~~
* ~~Breadcrumb: Show the parent project, e.g. the program (we only show the parent project, not the entire hierarchy)~~
* ~~Page title:~~ `~~Project name~~`
* ~~Sidebar: "Project home"~~
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/791444/content"></div><figcaption class="op-uc-figure--description"><s>Status in 16.5</s></figcaption></figure>
<br>
* ~~**(3) Work package: Example User Story A1**~~
* ~~Breadcrumb: "Epic A" (in case there is no parent work package we show~~ `~~Query~~`
* ~~Page title: "User Story A1"~~
* ~~Sidebar:~~ `~~Query~~`
* ~~**(4) Meetings: Example "Daily Stand up - 2025-10-13"**~~
* ~~Breadcrumb: "Daily Status up" (Meeting series)~~
* ~~Page title: "Daily Stand up - 2025-10-13"~~
* ~~Sidebar:~~ `~~Meeting series~~`
* ~~**(5) Administration home**~~
* ~~Breadcrumb: remove~~
* ~~Page title: "Administration"~~
* ~~Sidebar: "Overview"~~
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/792357/content"></div><figcaption class="op-uc-figure--description">Status 16.5</figcaption></figure>
* **Old/outdated**
* ~~The currently existing widgets "Project description" and "Project status" will be merged into a new widget for the overview tab which shows the information for this project~~
* ~~The widget shows:~~
* ~~no widget title~~
* ~~the project title in large~~
* ~~the project description (if set)~~
* ~~if not set, there is a text: "Add a project description in the project settings". For users, that can edit the settings, "project setting" shall be a link redirecting to the project settings.~~
* ~~the project status button~~
* ~~For users who are allowed to change the status, the button shall be in edit mode~~
* ~~the project status description (if set)~~
* ~~if not set, there is nothing shown~~
* ~~The widget is the same for each workspace (project, portfolio, program)~~
* ~~The widget is the first one to be shown on the overview tab~~
* ~~The widget goes full width~~
<br>
~~**Technical notes**~~
* ~~...~~
~~**Permissions and visibility considerations**~~
* _~~No new permissions~~_
~~**Translation considerations**~~
* _~~No new terms~~_
~~**Out of scope**~~
* ~~Changing Angular-based views~~
* ~~Opening a navigation pane from the hierarchy (we could evaluate whether the can use the tree component for this)~~
<img class="image_resized op-uc-image op-uc-image_inline" style="width:489px;" src="/api/v3/attachments/791442/content">
* ~~Show the widget per default on the Dashboard. The overview is the entry point for each project, so the value lays in showing the project context here. On the dashboard the project context is still present in the project selector as well as in the Breadcrumb.~~
* ~~We might want to provide that as Angular widget later as well, but currently this is out of scope.~~
<br>
**As** an OpenProject user
**I want to** have a consistent breadcrumb and page title system
**so that** I can easily navigate through my navigation and always know where I am and how I get to the pages I need to finish my job.
# **Acceptance criteria**
* Remove breadcrumb from these entry pages:
* Instance home
* Project home
* Administration home
* My Page
* Remove instance name from the breadcrumb (where breadcrumb is visible)
* Verify that this does not affect proper mobile navigation (eg. that it does not create
* Change page title (PageHeader) on these entry pages:
* Instance home: "Home" → {Instance name}
* Project home: "Project home" → {Project name}
* Administration: "Overview" → "Administration"
*
*
* Update PageHeader docs in LookBook to allow not displaying the PageHeader
## **Out of scope**
* Sidebar titles for these pages remain as they are today (unchanged)
* Angular pages (eg. Work package details)
* Other modules (eg. Meetings) will be handled separately
<br>
# **Archived**
* ~~**(1) Global home**~~
* ~~Breadcrumb: Remove breadcrumb (there is no need to have a breadcrumb there)~~
* ~~Page title:~~ `~~Application title~~`
* ~~Sidebar: "Home"~~
<figure class="image image_resized op-uc-figure" style="width:894px;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/791443/content"></div><figcaption class="op-uc-figure--description"><s>Status in 16.5</s></figcaption></figure>
* ~~**(2) Project home**~~
* ~~Breadcrumb: Show the parent project, e.g. the program (we only show the parent project, not the entire hierarchy)~~
* ~~Page title:~~ `~~Project name~~`
* ~~Sidebar: "Project home"~~
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/791444/content"></div><figcaption class="op-uc-figure--description"><s>Status in 16.5</s></figcaption></figure>
<br>
* ~~**(3) Work package: Example User Story A1**~~
* ~~Breadcrumb: "Epic A" (in case there is no parent work package we show~~ `~~Query~~`
* ~~Page title: "User Story A1"~~
* ~~Sidebar:~~ `~~Query~~`
* ~~**(4) Meetings: Example "Daily Stand up - 2025-10-13"**~~
* ~~Breadcrumb: "Daily Status up" (Meeting series)~~
* ~~Page title: "Daily Stand up - 2025-10-13"~~
* ~~Sidebar:~~ `~~Meeting series~~`
* ~~**(5) Administration home**~~
* ~~Breadcrumb: remove~~
* ~~Page title: "Administration"~~
* ~~Sidebar: "Overview"~~
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/792357/content"></div><figcaption class="op-uc-figure--description">Status 16.5</figcaption></figure>
* **Old/outdated**
* ~~The currently existing widgets "Project description" and "Project status" will be merged into a new widget for the overview tab which shows the information for this project~~
* ~~The widget shows:~~
* ~~no widget title~~
* ~~the project title in large~~
* ~~the project description (if set)~~
* ~~if not set, there is a text: "Add a project description in the project settings". For users, that can edit the settings, "project setting" shall be a link redirecting to the project settings.~~
* ~~the project status button~~
* ~~For users who are allowed to change the status, the button shall be in edit mode~~
* ~~the project status description (if set)~~
* ~~if not set, there is nothing shown~~
* ~~The widget is the same for each workspace (project, portfolio, program)~~
* ~~The widget is the first one to be shown on the overview tab~~
* ~~The widget goes full width~~
<br>
~~**Technical notes**~~
* ~~...~~
~~**Permissions and visibility considerations**~~
* _~~No new permissions~~_
~~**Translation considerations**~~
* _~~No new terms~~_
~~**Out of scope**~~
* ~~Changing Angular-based views~~
* ~~Opening a navigation pane from the hierarchy (we could evaluate whether the can use the tree component for this)~~
<img class="image_resized op-uc-image op-uc-image_inline" style="width:489px;" src="/api/v3/attachments/791442/content">
* ~~Show the widget per default on the Dashboard. The overview is the entry point for each project, so the value lays in showing the project context here. On the dashboard the project context is still present in the project selector as well as in the Breadcrumb.~~
* ~~We might want to provide that as Angular widget later as well, but currently this is out of scope.~~
<br>