FalkonTutorials/qml/articles/7.Adding_a_sidebar.md

# Falkon QML Tutorial - 7. Adding a sidebar

Hello, in this chapter I will show you how to create a custom sidebar.

## Create sidebar

```qml
import QtQuick.Controls 2.3

Falkon.SideBar {
    name: 'qml-tutorial7-sidebar'
    title: i18n('Tutorial 7 - QML SideBar')
    icon: 'falkon'
    checkable: false
    shortcut: 'Ctrl+Shift+Alt+S'
    Pane {
        /* Actual UI and some drawing logic */
    }
}
```

### Falkon.SideBar

#### name
Internal name of the sidebar. This is required property.

#### title
Sidebar title visible when sidebar is enabled and also displayed in the
menu when selecting sidebars.

#### icon
Icon for sidebar, well I do not know if it is used properly since I did
not see it anywhere in the program window.

#### checkable
Should be for the menu, I am not very sure of its usage.

#### shortcut
Looks like a global keyboard shortcut to show&hide the sidebar.

#### default item
There has to be a "body" of sidebar of some sort to display. Use some
Qml stuff here. (I lack Qml knowledge.)

## Example
The example will add a sidebar and in it will be an image and a button.
This example is ripped of from Falkon default "Hello Qml" extension with
addition of a keyboard shortcut.
(I am not gonna re-invent a wheel.)

![Window with sidebar and view menu](../images/qml_tutorial7/sidebar_and_view_menu.png)

### Code
The code for this example can be found at
[extensions/qml_tutorial_7](../extensions/qml_tutorial_7)