# Drawers Drawers are panels that slide out of the sides of the application window. They can be populated with interactive elements such as Kirigami Actions, buttons, text, and more. Drawers come in different types, shapes, and forms. In this page we will go over each type and provide an overview of their characteristics. ### Global drawer The global drawer is a standard feature in KDE's mobile applications and can sometimes be found in their desktop incarnations too. It contains an application's main menu: included here are any functions that are not specific to the current page but still significant to general navigation or interaction within the application. It can be activated by tapping the hamburger menu or by swiping from the left edge to the middle of the screen in Left to Right mode or from the right edge in Right to Left mode. [Kirigami.GlobalDrawer](docs:kirigami2;GlobalDrawer) components are what we use to create such drawers. These are set to the [globalDrawer](docs:kirigami2;AbstractApplicationWindow::globalDrawer) property of the [Kirigami.ApplicationWindow](docs:kirigami2;ApplicationWindow) that forms the basis of our Kirigami application. ```qml import QtQuick import org.kde.kirigami as Kirigami Kirigami.ApplicationWindow { title: "Drawers App" width: 600 height: 600 pageStack.initialPage: Kirigami.Page { /* Page code here... */ } globalDrawer: Kirigami.GlobalDrawer { title: "Global Drawer" titleIcon: "applications-graphics" actions: [ Kirigami.Action { text: "Kirigami Action 1" icon.name: "user-home-symbolic" onTriggered: showPassiveNotification("Action 1 clicked") }, Kirigami.Action { text: "Kirigami Action 2" icon.name: "settings-configure-symbolic" onTriggered: showPassiveNotification("Action 2 clicked") }, Kirigami.Action { text: i18n("Quit") icon.name: "application-exit-symbolic" shortcut: StandardKey.Quit onTriggered: Qt.quit() } ] } } ``` ![Screenshot of a global drawer in desktop mode that looks like a sidebar](https://github.com/Neshama1/develop-kde-org/blob/master/docs/getting-started/kirigami/components-drawers/globaldrawer_simple.webp) {% hint style="info" %} Note The [titleIcon](docs:kirigami2;GlobalDrawer::titleIcon) property takes names for system-wide icons according to the FreeDesktop specification. These icons and icon names can be viewed with KDE's CuttleFish application which comes with [plasma-sdk](https://invent.kde.org/plasma/plasma-sdk), or by visiting [FreeDesktop's icon naming specification](https://specifications.freedesktop.org/icon-naming-spec/icon-naming-spec-latest.html). {% endhint %} #### Header Headers can be used to place sticky components at the top of your global drawer. Header components will stay in place even if your global drawer contains nested Kirigami actions that replace the current layer on the global drawer. Your chosen header component can be set with the global drawer's `header` property, and it will replace the global drawer's title. This is useful to add a `Kirigami.SearchField`, for example: ```qml import QtQuick import org.kde.kirigami as Kirigami Kirigami.ApplicationWindow { title: "Drawers App" width: 600 height: 600 pageStack.initialPage: Kirigami.Page { /* Page code here... */ } globalDrawer: Kirigami.GlobalDrawer { title: "Global Drawer with searchfield (not visible)" header: Kirigami.SearchField { id: searchField } actions: [ Kirigami.Action { text: "Kirigami Action 1" icon.name: "user-home-symbolic" onTriggered: showPassiveNotification("Action 1 clicked") }, Kirigami.Action { text: "Kirigami Action 2" icon.name: "settings-configure-symbolic" onTriggered: showPassiveNotification("Action 2 clicked") }, Kirigami.Action { text: i18n("Quit") icon.name: "application-exit-symbolic" shortcut: StandardKey.Quit onTriggered: Qt.quit() } ] } } ``` ![Our global drawer now shows the search bar component we set as the header](/files/S8uRo8BSCUNqyOYKw94z) #### Adapting for the desktop While panel-style global drawers can be useful in mobile environments, they might be too large on the desktop, especially when the application has few actions. Thankfully, Kirigami global drawers provide an [isMenu](docs:kirigami2;GlobalDrawer::isMenu) property. When set to `true`, they turn into more traditional menus only on the desktop. {% hint style="info" %} Note In this menu mode, headers and banners are not visible. {% endhint %} ```qml globalDrawer: Kirigami.GlobalDrawer { isMenu: true actions: [ // Kirigami Actions here... ] } ``` ![Our global drawer now shows the search bar component we set as the header](/files/4cHbMDt6BQ1c99z4Y9e9) ### Context Drawers While a [Kirigami.GlobalDrawer](docs:kirigami2;GlobalDrawer) displays global actions available throughout your application, a [Kirigami.ContextDrawer](docs:kirigami2;ContextDrawer) should be used to display actions that are only relevant in certain contexts. This is usually used in separate [pages](https://github.com/Neshama1/develop-kde-org/blob/master/docs/getting-started/kirigami/introduction-pages/README.md). A context drawer will only show up if any [contextualActions](docs:kirigami2;Page::contextualActions) have been created as part of the [Page.actions group](docs:kirigami2;Page::actions). It also behaves differently depending on whether it is being used on a mobile platform or on a desktop. On a desktop, when a window has enough space, contextual actions show up as part of the `actions` group in the top toolbar. When space is limited, such as on a mobile device or in a narrow window, contextual actions are hidden behind a hamburger menu on the right side. This is different from other actions in the `actions` group, namely `actions.main`, `actions.left` and `actions.right`; these do not get hidden in space-constrained windows, and are instead collapsed into their respective icons. ```qml import org.kde.kirigami as Kirigami Kirigami.ApplicationWindow { title: "Drawers App" height: 600 width: 1200 minimumWidth: 500 globalDrawer: Kirigami.GlobalDrawer {} contextDrawer: Kirigami.ContextDrawer {} pageStack.initialPage: [ emptyPage, contextDrawerPage ] Kirigami.Page { title: "Empty page" id: emptyPage } Kirigami.Page { id: contextDrawerPage title: "Context Drawer page" actions: [ Kirigami.Action { icon.name: "media-record" }, Kirigami.Action { icon.name: "arrow-left" }, Kirigami.Action { icon.name: "arrow-right" }, Kirigami.Action { text: "Contextual Action 1" icon.name: "media-playback-start" }, Kirigami.Action { text: "Contextual Action 2" icon.name: "media-playback-stop" } ] } } ``` ![Context drawer with contextual actions hidden](/files/hl3XdT16iVTqytZqVEIZ) ![Our global drawer now shows the search bar component we set as the header](/files/ILQw7lO64Ovr6rmtpar5) On mobile, the drawer always consists of actions hidden behind a hamburger menu. It can be activated by tapping the hamburger menu or by swiping from the right edge to the middle of the screen in Left to Right mode or from the left edge in Right to Left mode. ![Our global drawer now shows the search bar component we set as the header](/files/PY3skBWKIS1jOv41aDEM) ![Our global drawer now shows the search bar component we set as the header](/files/83s06qsXfpn9X5PZKL4I) ### Modal and Inline drawers Kirigami offers two additional types of drawers, modal drawers and inline drawers. They are quite similar to each other: both span the entirety of the application's width or height and can be placed on the edges of the app window. However, they do react differently to user interaction. * Modal drawers are hidden by default and darken the rest of the application, being dismissed when clicking on a darkened area. * Inline drawers are shown by default and allow the user to still interact with the rest of the application without being dismissed, and do not darken other areas. This kind of drawer is open ended and flexible, but generally, you may want to use this kind of drawer when you want a small list of options to appear on a long press or right click. These two drawers are so similar because they can, in fact, be implemented using the same Kirigami component: [Kirigami.OverlayDrawer](docs:kirigami2;OverlayDrawer). Here are a few important inherited properties of this component to keep in mind: * [Popup.modal](https://doc.qt.io/qt-6/qml-qtquick-controls2-popup.html#modal-prop) controls whether the drawer will be modal or inline depending on a boolean value. * [Drawer.edge](https://doc.qt.io/qt-6/qml-qtquick-controls2-drawer.html#edge-prop) controls which edge of the application window the drawer will appear on; options for this property are part of the [Edge enum](docs:qtcore;Qt::RightEdge), namely `Qt.TopEdge`, `Qt.RightEdge`, `Qt.BottomEdge`, and `Qt.LeftEdge`. * [Popup.contentItem](https://doc.qt.io/qt-6/qml-qtquick-controls2-popup.html#contentItem-prop) contains the component that will form the content of your drawer. ```qml import QtQuick import QtQuick.Layouts import QtQuick.Controls as Controls import org.kde.kirigami as Kirigami Kirigami.ApplicationWindow { title: "Drawers App" width: 400 height: 600 pageStack.initialPage: Kirigami.Page { title: "OverlayDrawer at the bottom" actions: [ Kirigami.Action { text: "Open bottomDrawer" onTriggered: bottomDrawer.open() } ] Kirigami.OverlayDrawer { id: bottomDrawer edge: Qt.BottomEdge // Set modal to false to make this drawer inline! modal: true contentItem: RowLayout { Controls.Label { Layout.fillWidth: true text: "Say hello to my little drawer!" } Controls.Button { text: "Close" onClicked: bottomDrawer.close() } } } } } ``` ![Modal drawer not visible](/files/ufJSqwP415JRlhOSZNwe) ![Modal drawer at the bottom edge of the screen](/files/YoATvQZjECq9M91QPa2Q) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.novaflowos.com/start/kde-developer-platform/readme/getting-started/kirigami/index-13.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.