---
title: "Header and shortcuts"
description: "The header is the zone which makes up the upper part of your app. When used to its potential, it can be a very strategic area. It's an essential element in your"
canonical_url: "https://www.goodbarber.com/blog/header-and-shortcuts-a853/"
lang: en
date: 2017-06-23
last_updated: 2017-06-30
---

# Header and shortcuts

[Back](/blog/make-it-r13/)

# Header and shortcuts

Written by [Jerome Granados](https://www.goodbarber.com/blog/author/jerome-granados/)  on Friday 23 June 2017· Last update: Friday 30 June 2017

![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/15013928-20557952.jpg?v=1498223841.0581856)

The header is the zone which makes up the upper part of your app. When used to its potential, it can be a very strategic area. It's an essential element in your app's visual identity as well as an area providing instant access to links. If you are looking for best practices on [how to make an app](https://www.goodbarber.com/blog/how-to-make-an-app/), read on!

## Visual Identity

![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/15013928-20557953.jpg?v=1498223883.4784665)

The header is where you display the title of your app, or even your logo.
The header is visible both in the home and inside sections. In the detail pages, it's used to display navigation and sharing buttons.

In your header, you can apply background colors, textures, and alignments.
You can choose the navigation button icons and the text fonts. There are numerous options for setting up this area's design in order to seamlessly integrate your visual identity.

![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/15013928-20558099.jpg?v=1498223914.4589345)

It's possible to personalize the display of the header depending on the section. For example, in a cooking app you could have a specific header for a "Recipes" section and another one for an "Events" section. This option gives you a lot of flexibility, but be sure to still maintain some sense of consistency between the various headers so you don't confuse your users.

## Shortcuts

![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/15013928-20558165.jpg?v=1498223966.7917523)

The header has 3 slots that can hold links. Use these slots to suggest quick actions that are easily accessible from almost anywhere in the app.
You have the option to add up to 6 shortcuts in the header. When you have 4+ shortcuts, the third slot is automatically used to display an additional menu.

The icon, the destination, the title, and the colors for each shortcut can be personalized.

On mobile, the shortcut can only be represented by an icon. On tablet, it's possible to display the a title for a shortcut next to its icon. On laptop or desktop, the shortcut can be transformed into a button, by adding a background color under the icon and title.

The way the additional menu works is identical on mobile and tablet. It appears in overlay at the bottom of the screen. On laptop and desktop, it drops down from the icon when clicked.

The header gives you the extra flexibility to organize the navigation in your app–it's complementary to the [home](https://www.goodbarber.com/blog/modular-home-a834/) and [menu](https://www.goodbarber.com/blog/menu-and-secondary-navigation-a835/).

![Jerome Granados](https://blog.goodbarber.com/_public/profile/1b/1b6453892473a467d07372d45eb05abc2031647a-default.jpg)

About the author[Jerome Granados](https://www.goodbarber.com/blog/author/jerome-granados/)CMO

I am the CMO and a partner at GoodBarber.

Through this blog, I share practical tips to help you get the most out of GoodBarber, insights into the trends shaping mobile and no-code technologies, as well as a few thoughts on the impact of artificial intelligence on our industry.

If an article sparks a question, an idea, or feedback, let’s discuss it in the comments.

[Read more](https://www.goodbarber.com/blog/author/jerome-granados/)

[![LinkedIn](https://portal.ww-cdn.com/portal_static/svg/base2021/linkedin.3ed8162e2a2b.svg)](https://www.linkedin.com/in/jeromegranados/)[![X](https://portal.ww-cdn.com/portal_static/svg/base2021/x.820492c586dd.svg)](https://x.com/jeromegranados)[![Facebook](https://portal.ww-cdn.com/portal_static/svg/base2021/fb.be37c82b8283.svg)](https://www.facebook.com/jerome.granados)[![Instagram](https://portal.ww-cdn.com/portal_static/svg/base2021/instagram.e3b82841d5d7.svg)](https://www.instagram.com/jeromegranados/)[![Pinterest](https://portal.ww-cdn.com/portal_static/svg/base2021/pinterest.3ba400801cb2.svg)](https://www.pinterest.com/jeromegranados/)