Layout Header and Footer

QLayout allows you to configure your views as a 3x3 matrix, containing an optional Header and/or Footer (mostly used for navbar, but can be anything). If you haven’t already, please read QLayout documentation page first.

Installation

Pick only what you are using from the list below.

// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QHeader',
      'QFooter'
    ]
  }
}

Layout Builder

Scaffold your layout(s) by clicking on the button below.

Layout Builder

Usage

TIP

Since the header and footer needs a layout and QLayout by default manages the entire window, then for demoing purposes we are going to use containerized QLayouts. But remember that by no means you are required to use containerized QLayouts for QHeader or QFooter.

Basic

You can use glossy class on toolbars in header and footer.

Glossy

Various content

Playing with QToolbar
Playing with QBreadcrumb
Playing with QTabs

Reveal property

In the example below, scroll the page to see the QHeader and QFooter behavior.

Reveal

iOS look and feel

In the example below, you could use Ionicons icons with ion-ios- prefix for QTabs, which would perfectly match the iOS look and feel.

iOS-like

Desktop app look and feel

The example below is especially useful if you build an Electron app and you hide the default app frame.

Desktop app-like

QHeader API

QFooter API