shadcn.io is not affiliated with official shadcn/ui
Sticky Header Sidebar Block for Solid
A store admin in a fixed-height window whose sidebar keeps its header and footer in place over eighteen scrolling pages, with a hairline that appears only while there is something to scroll, a filter, and a Back to top button.
Installation
Overview
Keep a long menu's identity and account in view with this sticky header sidebar for Solid with Ark UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar in the theme's muted tone whose header, the brand and a filter field, and footer, your account, stay in place while eighteen two-line pages scroll between them. A hairline appears under the header once the list has scrolled and one over the footer while more is below; neither shows when there is nothing to scroll under or over. After six rows have gone by, or at the end of the list on a tall screen, a Back to top button shows in the footer; it scrolls the list home and puts focus on the first row. The filter narrows the eighteen pages by name or hint, says how many match and shows an Empty with a Clear filter button when none do. Folded to icons, the pinned parts stay and the pages show their icons with tooltips; on a phone the sidebar is a sheet. The page lists the chosen page's three rows. It's built from Sidebar, Empty, Button, Avatar and Guides, with a CSS entrance only. For admin consoles, settings and any menu too long for one screen.
FAQ
How are the header and footer kept in place?
They are the Sidebar's own SidebarHeader and SidebarFooter, which sit above and below SidebarContent, the only part that scrolls. Nothing is made sticky with CSS. The hairlines are borders that are transparent until data-on is true, so they appear without moving anything.
How does the block know the list has scrolled?
The scroll area's events don't bubble, so the block listens for scroll on the document in the capture phase and keeps the ones that come from this block's own list. It then reads three things from the scroller: whether it has scrolled, whether more is below and whether the seventh row has reached the top. A filter shortens the list without scrolling it, so the block looks again whenever the typed words change.
What does Back to top do?
It stays in the footer's account row, hidden and out of the tab order until six rows have scrolled out of sight, or until you reach the end of a list that has scrolled a fair way (a tall phone may never get six rows away). Pressing it puts focus on the first row first, then sets the list's scroll position to zero, so keyboard focus is never lost when the button hides. It uses scrollTop, not scrollIntoView, so the page around the window never moves.
How does the filter work, and what does it say?
It matches the typed words against each page's name and hint, ignoring case and accents. A count under the field updates at once, and the polite status line says how many match about half a second after you stop typing, so a screen reader isn't read every letter. With no match the list gives way to a short empty state, and Clear filter returns focus to the field.
What stays in the page, and how do I connect it?
Everything. The eighteen pages and their lists are typed in SECTIONS; nothing is fetched or saved, and the block sets persist={false} and shortcut={false} so it writes no cookie. The pages are links to # whose handler shows the page instead of navigating. Replace the list with your routes and mark the current one with isActive and aria-current.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The header, footer, filter and Back to top button work inside it exactly as they do beside the page. Choosing a page closes the sheet and puts focus back on the button.