Keep App footer/header

Ionic Framework
1

I want to switch between pages, but still keep the App footer and header.
Currently I am using a custom App footer and header component and put those into each page.
However, the transition effect shows the App footer and header also transitioning (to the same looking App footer and header), instead just only changing the page content in the middle.

Can I put the App footer and header at the outside of the page transitions?

1 Like
2

You should put the toolbar and footer components in your app.component.html (if you’re using Angular or App.vue if you’re using Vue.JS) outside the “ion-router-outlet” element.

1 Like
3

This is by design to match the guidelines from material and iOS.

Putting a header/footer outside the router outlet as @saseye suggested is not recommended.

1 Like
5

Post was deleted, but answer anyway…

“why is this not recomended?”

The layout of each page is based on flexbox. Meaning that if you remove a header or footer from the page itself, the flex of the page will lose that context. So your ion-content could eventually go under the header, which will cause some layout issues.

1 Like
6

Thanks for your answers! I will keep it like that then. The page transition effect that goes over the whole screen, including the header and footer is intentional/native-like then.

For the issue that the whole page reloads when <IonBreadcrumb>s are used I found the reason:
<IonBreadcrumb> only supports the href prop, no routerLink.
I nested an <IonRouterLink> inside the <IonBreadcrumb> element with the routerLink prop - and now the page switching and transitions are working without the whole page reloading each time:

<IonBreadcrumb>
    <IonRouterLink routerLink={`/category/${category.slug}`}>
        <IonIcon icon={category.icon}></IonIcon>
          {category.name}
        </IonRouterLink>
</IonBreadcrumb>