Skip to content

Instantly share code, notes, and snippets.

@BjornDCode
Created February 3, 2020 11:58
Show Gist options
  • Save BjornDCode/5cb836a6b23638d6d02f5cb6ed59a04a to your computer and use it in GitHub Desktop.
Save BjornDCode/5cb836a6b23638d6d02f5cb6ed59a04a to your computer and use it in GitHub Desktop.
Tailwind - Fixed sidebar, scrollable content
// Source: https://twitter.com/calebporzio/status/1151876736931549185
<div class="flex">
<aside class="h-screen sticky top-0">
// Fixed Sidebar
</aside>
<main>
// Content
</main>
</div>
@amazingnerd
Copy link

Nice, thank you!

@jamil7
Copy link

jamil7 commented Jan 25, 2023

Thanks!

@joostvanhoof
Copy link

Great snippet, thanks! Would add overflow-y-scroll to the aside so if the side menu's height becomes less than the height of the viewport, there is a vertical scrollbar.

@hasanharman
Copy link

Thanks a lot. I've been wasting my time using fixed instead of using sticky

@joseehilton147
Copy link

thanks a lot, works really well

@kodunmi
Copy link

kodunmi commented Apr 14, 2023

This is beautiful

But, how do I make it scroll down when a scroll down is initiated

@ruiaraujo012
Copy link

ruiaraujo012 commented Jun 21, 2023

This works perfectly, but it doesn't work with a fixed navbar.
With a bit of research, I managed to make it work:

<nav class="fixed bottom-[calc(100vh-theme(spacing.16))] left-0 right-0 top-0 bg-blue-200">Nav</nav>

<div class="flex min-h-screen">
  <aside class="sticky top-16 h-[calc(100vh-theme(spacing.16))] w-40 overflow-y-auto bg-green-200">
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </aside>

  <main class="mt-16 flex-1 bg-yellow-200">
    <p>content</p>
  </main>
</div>

image

@damywise
Copy link

damywise commented Jul 3, 2023

This works perfectly, but it doesn't work with a fixed navbar. With a bit of research, I managed to make it work:

<nav class="fixed bottom-[calc(100vh-theme(spacing.16))] left-0 right-0 top-0 bg-blue-200">Nav</nav>

<div class="flex min-h-screen">
  <aside class="sticky top-16 h-[calc(100vh-theme(spacing.16))] w-40 overflow-y-auto bg-green-200">
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </aside>

  <main class="mt-16 flex-1 bg-yellow-200">
    <p>content</p>
  </main>
</div>

@ruiaraujo012 Thank you so much for sharing!

@shubham-lohar
Copy link

This works perfectly, but it doesn't work with a fixed navbar. With a bit of research, I managed to make it work:

<nav class="fixed bottom-[calc(100vh-theme(spacing.16))] left-0 right-0 top-0 bg-blue-200">Nav</nav>

<div class="flex min-h-screen">
  <aside class="sticky top-16 h-[calc(100vh-theme(spacing.16))] w-40 overflow-y-auto bg-green-200">
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </aside>

  <main class="mt-16 flex-1 bg-yellow-200">
    <p>content</p>
  </main>
</div>

image

What if we need to add Footer as well to this, I tries it is not working, Any Ideas !

@Daftscientist
Copy link

I come back here so frequently. Thanks.

@mredaoudi
Copy link

Life saver!

@davidbirkin
Copy link

Thank You

@NisugaJ
Copy link

NisugaJ commented Dec 24, 2023

Thanks

@mk3-14159
Copy link

Thank you

@Matheuschimendes
Copy link

Thank you !

@kodunmi
Copy link

kodunmi commented Jul 29, 2024

<div class="grid grid-cols-7">
    <aside class="self-start sticky top-0 col-span-1">
        // Fixed Sidebar
    </aside>
    
    <main class="col-span-6">
        // Content
    </main>
</div>

This is perfect

@mirola777
Copy link

te amo

@wnm
Copy link

wnm commented Dec 6, 2024

If you have a different colored sidebar and want it to expand to the full height, add h-full to your grid:

<div class="grid grid-cols-7 h-full">
    <aside class="self-start sticky top-0 col-span-1 bg-stone-50">
        // Fixed Sidebar
    </aside>
    
    <main class="col-span-6">
        // Content
    </main>
</div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment