# Page rows and page stacks ### A row of pages We have seen so far that one of the core components of a Kirigami window is a [Kirigami.Page](docs:kirigami2;Page). A single page can envelop the whole screen of the application, or it can be shown together with other pages at the same time, if there is space. Whenever a page gets added, or *pushed*, it appears to the right of the existing page(s), forming a row. This row of pages can be managed with the fittingly named [Kirigami.PageRow](docs:kirigami2;PageRow). A minimal page row with a single page could look like this: ```qml import QtQuick import org.kde.kirigami as Kirigami Kirigami.ApplicationWindow { title: "Single Page" width: 500 height: 200 Kirigami.PageRow { anchors.fill: parent Kirigami.Page { id: mainPage anchors.fill: parent Rectangle { anchors.fill: parent color: "lightblue" } } } } ``` ![A single page with light blue color to show the page's dimensions](https://2854466518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2YSWk59V1RtNco6tGNDq%2Fuploads%2Fgit-blob-50ac23955de22605a43ffb0ebc00563e6cc043d9%2Fsinglepage.webp?alt=media) There are two improvements that can be done here. The first is that, with [initialPage](docs:kirigami2;PageRow::initialPage), we can both set `mainPage` to be the first page that appears in the page row, and have its dimensions be managed by the page row instead of via manual [anchors](https://doc.qt.io/qt-6/qtquick-positioning-anchors.html), [positioners](https://doc.qt.io/qt-6/qtquick-positioning-layouts.html) or [layouts](https://doc.qt.io/qt-6/layout.html). The second is to have a toolbar, which can be set by defining a toolbar style with [globalToolBar.style](docs:kirigami2;PageRow::globalToolBar). There are a few styles we can choose from, but we'll go with [Kirigami.ApplicationHeaderStyle.Auto](docs:kirigami2;templates::ApplicationHeader::headerStyle) for now. ```qml import QtQuick import org.kde.kirigami as Kirigami Kirigami.ApplicationWindow { title: "With globalToolBar and initialPage" width: 500 height: 200 Kirigami.PageRow { anchors.fill: parent globalToolBar.style: Kirigami.ApplicationHeaderStyle.Auto initialPage: Kirigami.Page { Rectangle { anchors.fill: parent color: "lightblue" } } } } ``` ![A single page with toolbar and light blue color to show the page's dimensions](https://2854466518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2YSWk59V1RtNco6tGNDq%2Fuploads%2Fgit-blob-430980057a6b828c20cdd3128bbf8bfe15ac2cdb%2Finitialpage.webp?alt=media) There are only two ways of adding pages to a page row: by setting its [initialPage](docs:kirigami2;PageRow::initialPage) (which can optionally take an array of pages) or by using [push()](docs:kirigami2;PageRow::push). To delete a page from the page row, you should use [pop()](docs:kirigami2;PageRow::pop), whereas [goBack()](docs:kirigami2;PageRow::goBack) or [goForward()](docs:kirigami2;PageRow::goForward) can be used to navigate between pages. ```qml import QtQuick import QtQuick.Controls as Controls import org.kde.kirigami as Kirigami Kirigami.ApplicationWindow { title: "Multiple pages in a row" width: 700 height: 300 Kirigami.PageRow { id: mainRow anchors.fill: parent globalToolBar.style: Kirigami.ApplicationHeaderStyle.Auto initialPage: Kirigami.Page { id: firstPage Rectangle { anchors.fill: parent color: "lightblue" Controls.Button { anchors.centerIn: parent text: "Push!" onClicked: mainRow.push(secondPage) } } } Component { id: secondPage Kirigami.Page { Rectangle { anchors.fill: parent color: "lightgreen" Controls.Button { anchors.centerIn: parent text: "Pop!" onClicked: mainRow.pop() } } } } } } ``` ![Initial page with light blue color](https://2854466518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2YSWk59V1RtNco6tGNDq%2Fuploads%2Fgit-blob-2a80c031a8d2f0fe0cabaece5d63a1d2f9ebeb0b%2Fmultiplepages1.webp?alt=media) ![Upon clicking Push](https://2854466518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2YSWk59V1RtNco6tGNDq%2Fuploads%2Fgit-blob-d4e583c53be94613854f4cbdaeaa3a94a7a05e88%2Fmultiplepages2.webp?alt=media) ### The application's stack of pages If a [Kirigami.PageRow](docs:kirigami2;PageRow) with a toolbar looks familiar to you, that is because you have seen it before. An [ApplicationWindow.pageStack](docs:kirigami2;AbstractApplicationWindow::pageStack) is nothing more than a very convenient, global page row. Every function available to a `PageRow` is also available to the `pageStack`. The previous example can be reduced significantly with a `pageStack`, with the added bonus of navigation actions: ```qml import QtQuick import QtQuick.Controls as Controls import org.kde.kirigami as Kirigami Kirigami.ApplicationWindow { title: "Using the pageStack" width: 500 height: 200 pageStack.initialPage: Kirigami.Page { id: firstPage Rectangle { anchors.fill: parent color: "lightblue" Controls.Button { anchors.centerIn: parent text: "Push!" onClicked: pageStack.push(secondPage) } } } Component { id: secondPage Kirigami.Page { Rectangle { anchors.fill: parent color: "lightgreen" Controls.Button { anchors.centerIn: parent text: "Pop!" onClicked: pageStack.pop() } } } } } ``` ![](https://2854466518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2YSWk59V1RtNco6tGNDq%2Fuploads%2Fgit-blob-1296a11b238ad7a3c459c8cb9b1b6238959d2513%2Fpagestack1.webp?alt=media) ![](https://2854466518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2YSWk59V1RtNco6tGNDq%2Fuploads%2Fgit-blob-56160649edcfb4cca82fff8fa72968167638980c%2Fpagestack2.webp?alt=media) In general you'll want to use a `pageStack` rather than implement your own [PageRow](docs:kirigami2;PageRow), especially when your application gets bigger and you need your components living in separate files. If you create your window in your `Main.qml` using a [Kirigami.ApplicationWindow](docs:kirigami2;ApplicationWindow), a component residing in another file can still directly invoke the global `pageStack` by means of a call to the [applicationWindow()](docs:kirigami2;AbstractApplicationWindow::applicationWindow): ```qml // "Main.qml" import org.kde.kirigami as Kirigami Kirigami.ApplicationWindow { title: "Pushing a Page from a different QML file" width: 700 height: 400 pageStack.initialPage: BasicPage {} } ``` and ```qml // "BasicPage.qml" import QtQuick import QtQuick.Controls as Controls import org.kde.kirigami as Kirigami Kirigami.Page { Controls.Button { anchors.centerIn: parent text: "This pushes page1 from BasicPage\ninto the pageStack from Main.qml!" onClicked: { applicationWindow().pageStack.push(page1) } Component { id: page1 Kirigami.Page { Controls.Label { anchors.centerIn: parent text: "page1 was pushed!" } } } } } ``` ![Clicking the button pushes a new page with help of applicationWindow](https://2854466518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2YSWk59V1RtNco6tGNDq%2Fuploads%2Fgit-blob-fe8944919e7501322821c48a3e8347c9a374df32%2Fpushpage.webp?alt=media)