How to create sticky header on page?

  • I’ve got a qpage inside a qlayout. On this qpage I’d like to have a sticky menu that covers the width of the qpage. I can do this with a qtoolbar, but I haven’t figured out how to make it sticky. If I use qpagesticky then it just becomes overlaid over the content and what I’m looking for is reducing the qpage size.

    So question is, how do I create the green element C in the example below?


    I’ve been searching here about making qtoolbar sticky or nesting layouts, but haven’t been able to figure out how to accomplish this yet. Any ideas here?

  • Does this do what you are looking for?


  • Thanks for your idea! I tried it before but didn’t add padding. Now when I added padding for the content, it worked.

    However, expanded page-sticky doesn’t work with qsplitter, it expands over the split area. (i.e. into both ther before and after slots of qplitter). Any ideas on how that could be solved?

  • What is it that you are trying to “lay out”?


  • I’m trying to make the border between C/D and B draggable and am experiementing with qsplitter instead of qdrawer. It seems to be working except for this toolbar issue. However I managed to “solve” it in a hacky way, where the width of the qsticky is computed to be the same as the qsplitter-value. There ought to be a more elegant solution though:

    <q-splitter v-model="splitterModel" :limits="[50, 100]">
       <template v-slot:before>
         <q-page-sticky expand position="top" :style="toolBarWidth">
           <q-toolbar class="bg-accent text-white">
             <q-toolbar-title>Page Title</q-toolbar-title>
       <template v-slot:after>
         <sidebarComponent />
    export default {
    computed: {
     toolBarWidth() {
       return "width:" + this.splitterModel + "%";
    data() {
     return {
       splitterModel: 75

  • I would have thought 100% width for the sticky header would have worked.


Log in to reply