<commit_before>title: Layout
---
Layouts are the elements that wrap page content, like navigational bar or drawer. Multiple pages can share the same Layout, which is one of the main reason for their existence.

Quasar Layouts are not mandatory, but help you better structure the layout of your website/app and they have a lot of features that you can benefit out of the box.

<input type="hidden" data-fullpage-demo="layout">

## Basic Usage
An example of Layout, containing all possible elements: [QToolbar](/components/toolbar.html) (used on header and footer), navigational [QTabs](/components/tabs.html), a drawer on the left side (which is shown alongside page content on wide screens) and a drawer on the right side:

``` html
<q-layout ref="layout" view="hHr LpR lFf" :right-breakpoint="1100">
  <q-toolbar slot="header">
    <q-btn flat @click="$refs.layout.toggleLeft()">
      <q-icon name="menu" />
    </q-btn>
    <q-toolbar-title>
      Layout Header
      <span slot="subtitle">Optional subtitle</span>
    </q-toolbar-title>
    <q-btn flat @click="$refs.layout.toggleRight()">
      <q-icon name="menu" />
    </q-btn>
  </q-toolbar>

  <q-tabs slot="navigation">
    <q-route-tab slot="title" icon="view_quilt" to="/test-layout/about" replace hide="icon" label="About" />
    <q-route-tab slot="title" icon="view_day" to="/test-layout/toolbar" replace hide="icon" label="Toolbar" />
    <q-route-tab slot="title" icon="view_day" to="/test-layout/tabs" replace label="Tabs" />
    <q-route-tab slot="title" icon="input" to="/test-layout/drawer" replace label="Drawer" />
  </q-tabs>

  <q-scroll-area
    slot="left"
    style="width: 100%; height: 100%;"
  >
    <q-side-link item to="/test-layout/toolbar">Toolbar</q-side-link>
    <q-side-link item to="/test-layout/tabs">Tabs</q-side-link>
    <q-side-link item to="/test-layout/drawer">Drawer</q-side-link>
  </q-scroll-area>

  <div slot="right">
    Right Side of Layout
  </div>

  <!-- sub-routes get injected here: -->
  <router-view />

  <q-toolbar slot="footer">
    <q-toolbar-title>
      Layout Footer
    </q-toolbar-title>
  </q-toolbar>
</q-layout>
```

## Understanding QLayout

1. If your layout uses Vue Router sub-routes (recommended), then it makes sense to use Vue's `<router-view>` component, which is just a placeholder where sub-routes are injected.

2. QLayout uses the following Vue slots: `header`, `footer`, `navigation`, `left` and `right`. You can specify your content for these slots with the `slot` HTML attribute: `slot="footer"`.
  ``` html
  <q-layout>
    ...
    <div slot="footer">
      ...Your Content...
    </div>
    ...
  </q-layout>
  ```

  Note that you can use define multiple headers, footers and navigation elements. Specify `slot="header"` or `slot="footer"` on multiple elements if you need. The order in which you specify these DOM elements / components matters.

  The `navigation` slot will be placed after header and before page view (but part of header) on Material Design theme, and after page view and before footer (but part of footer) on iOS theme.

3. A great place to use [Toolbars](/components/toolbar.html) is for header and footer slots.
  ```html
  <q-toolbar slot="header" color="green">
    ... toolbar content ...
  </q-toolbar><commit_msg>Addition to Layout<commit_after>title: Layout
---
Layouts are the elements that wrap page content, like navigational bar or drawer. Multiple pages can share the same Layout, which is one of the main reason for their existence.

Quasar Layouts are not mandatory, but help you better structure the layout of your website/app and they have a lot of features that you can benefit out of the box.

<input type="hidden" data-fullpage-demo="layout">

## Basic Usage
An example of Layout, containing all possible elements: [QToolbar](/components/toolbar.html) (used on header and footer), navigational [QTabs](/components/tabs.html), a drawer on the left side (which is shown alongside page content on wide screens) and a drawer on the right side:

``` html
<q-layout ref="layout" view="hHr LpR lFf" :right-breakpoint="1100">
  <q-toolbar slot="header">
    <q-btn flat @click="$refs.layout.toggleLeft()">
      <q-icon name="menu" />
    </q-btn>
    <q-toolbar-title>
      Layout Header
      <span slot="subtitle">Optional subtitle</span>
    </q-toolbar-title>
    <q-btn flat @click="$refs.layout.toggleRight()">
      <q-icon name="menu" />
    </q-btn>
  </q-toolbar>

  <q-tabs slot="navigation">
    <q-route-tab slot="title" icon="view_quilt" to="/test-layout/about" replace hide="icon" label="About" />
    <q-route-tab slot="title" icon="view_day" to="/test-layout/toolbar" replace hide="icon" label="Toolbar" />
    <q-route-tab slot="title" icon="view_day" to="/test-layout/tabs" replace label="Tabs" />
    <q-route-tab slot="title" icon="input" to="/test-layout/drawer" replace label="Drawer" />
  </q-tabs>

  <div slot="left">
    <q-side-link item to="/test-layout/toolbar">Toolbar</q-side-link>
    <q-side-link item to="/test-layout/tabs">Tabs</q-side-link>
    <q-side-link item to="/test-layout/drawer">Drawer</q-side-link>
  </div>

  <div slot="right">
    Right Side of Layout
  </div>

  <!-- sub-routes get injected here: -->
  <router-view />

  <q-toolbar slot="footer">
    <q-toolbar-title>
      Layout Footer
    </q-toolbar-title>
  </q-toolbar>
</q-layout>
```

You can also use [QScrollArea](/components/scroll-area.html) for the left or right side of layout if you want to control the scrollbar:
```html
<q-scroll-area
  slot="left"
  style="width: 100%; height: 100%;"
>
  <q-side-link item to="/test-layout/toolbar">Toolbar</q-side-link>
  <q-side-link item to="/test-layout/tabs">Tabs</q-side-link>
  <q-side-link item to="/test-layout/drawer">Drawer</q-side-link>
</q-scroll-area>
```

## Understanding QLayout

1. If your layout uses Vue Router sub-routes (recommended), then it makes sense to use Vue's `<router-view>` component, which is just a placeholder where sub-routes are injected.

2. QLayout uses the following Vue slots: `header`, `footer`, `navigation`, `left` and `right`. You can specify your content for these slots with the `slot` HTML attribute: `slot="footer"`.
  ``` html
  <q-layout>
    ...
    <div slot="footer">
      ...Your Content...
    </div>
    ...
  </q-layout>
  ```

  Note that you can use define multiple headers, footers and navigation elements. Specify `slot="header"` or `slot="footer"` on multiple elements if you need. The order in which you specify these DOM elements / components matters.

  The `navigation` slot will be placed after header and before page view (but part of header) on Material Design theme, and after page view and before footer (but part of footer) on iOS theme.

3. A great place to use [Toolbars](/components/toolbar.html) is for header and footer slots.
  ```html
  <q-toolbar slot="header" color="green">
    ... toolbar content ...
  </q-toolbar>
{'fraction_non_alphanumeric': 0.14716491126821526, 'fraction_numerical': 0.0037512624440917616, 'mean_word_length': 3.6305945223780896, 'pattern_counts': {'":': 0, '<': 99, '<?xml version=': 0, '>': 99, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7192082', 'n_tokens_mistral': 2197, 'n_tokens_neox': 2134, 'n_words': 734}