Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 10:53, 13 June 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Header Based Menu for MeeGo-Harmattan

From Wiki
Jump to: navigation, search

This article explains how you can launch an app menu from the app header. This user interface design can provide a great user experience as the header is always visible to the user - it is used on MeeGo applications like Messaging and Facebook, etc.

Article Metadata
Tested with
Devices(s): N950
Platform(s): MeeGo Harmattan
Keywords: Qt Quick Component for MeeGo Harmattan
Created: gaba88 (28 Sep 2011)
Last edited: hamishwillee (13 Jun 2012)

Meego headermenu 01.png Meego headermenu 02.png Meego headermenu 03.png



Different approaches can be followed to achieve this feature. I have used a simple Rectangle and a MouseArea Component of plain QML to make the header.

When user clicks on the Header, different UI components can be shown to the user, for example in this article a simple SelectionDialog has been used.

Instead of a SelectionDialog something custom can also be used to complete this.

MeeGo QML Components Used

Many other plain QML components have also been used like Rectangle, ListModel, ListElement etc.

Code Snippet

Following is the simple code snippet used for implement the above mentioned approach.

import QtQuick 1.1 
import 1.0
Page {
tools: commonTools
titleText: "Header Menu"
selectedIndex: 0
model: ListModel{
ListElement{name:"Option One"}
ListElement{name:"Option Two"}
ListElement{name:"Option Three"}
ListElement {name:"Option Four"}
id: headerRect; anchors.left: mainPage.left; anchors.right: mainPage.right
width: mainPage.width ; height: mainPage.height/10
color: "cyan"
Text {
id: titleText
anchors.centerIn: headerRect
font.bold: true
font.pointSize: 20
text: qsTr("Click For Options")
anchors.fill: headerRect
onClicked: {
console.log("headerRect Clicked")
onPressed: {
headerRect.opacity = 0.7
onReleased: {
headerRect.opacity = 1
id:testLabel; anchors.topMargin: 30
color: "black"
font.pixelSize: 30


This is the simplest way a header menu can be implemented. This article will be further extended to show how we can incorporate a custom QML component with the header menu.

This page was last modified on 13 June 2012, at 10:53.
33 page views in the last 30 days.