DEV Community

Dimer Bwimba
Dimer Bwimba

Posted on

Fixed sidebar - scrollable content

A simple Tailwind layout to create a sticky sidebar and scrollable content next to it.

<div class="flex">
    <aside class="h-screen sticky top-0">
        // Fixed Sidebar
    </aside>

    <main>
        // Content
    </main>
</div>
Enter fullscreen mode Exit fullscreen mode

Discussion (4)

Collapse
archyscript profile image
ArchyScript

Thank you, sticky worked for me

Collapse
luisferfranco profile image
Luis F. Franco

How do I do exactly the opposite?
I want a scrollable sidebar and a "sticky" content
I have:

<div class="flex w-full">
    <aside class="h-screen">
        ...
    </aside>
    <div class="sticky top-0 h-screen">
        ...
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

`

But actually this thing scrolls the main content along with the sidebar

Collapse
moreaujean profile image
Jean Moreau

Thanks! Exactly what I was looking for.

Collapse
esbanarango profile image
Esteban Arango Medina

👍Thank you