shadcn.io is not affiliated with official shadcn/ui
Floating Variant Sidebar Block for Vue
A CSS toolkit's docs in a fixed-height window with a floating sidebar: a rounded card inset from the window over a tinted shell, five collapsing sections of pages, and a switch to the flush rail for comparison.
Installation
Overview
Give a docs site a rail that hovers with this floating variant sidebar for Vue with Ark UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar set to variant="floating": instead of a full-height column with a hairline, the rail is a rounded card with a border and a soft shadow, inset from the window's edge over a tinted shell. A Segment Group in the top bar flips between Floating and Flush so the difference is on screen, and the status line says which is on. The rail holds five docs sections as Collapsible menu items, each with its pages as sub-links; the page is the chosen docs page in typed text, with its section and last-edited date, a code sample and a note. Fold the rail to icons and the card keeps its shape; below the medium breakpoint it is a sheet, which has one look. It's built from Sidebar, Collapsible, Segment Group, Badge and Guides, with a CSS entrance only. For documentation, design systems, knowledge bases and any app with a lot of pages.
FAQ
What does the floating variant change?
variant="floating" pads the rail's container by half a rem on every side and gives its inner box a radius, a border and a small shadow, so the rail reads as a card set into the window instead of a column that touches its top, bottom and edge. The window behind it is tinted here (the provider has bg-muted) so the card reads as lifted in a light theme too. The flush variant, variant="sidebar", has no padding and draws a single hairline on the edge facing the page. The segment group changes only that prop; in a real app you pick one.
How do the sections open and close?
Each section is a Collapsible around a SidebarMenuItem: its button toggles the sub-menu under it, with its open state in the button's aria-expanded, and the pages are SidebarMenuSubButton links. Sections start closed except the one that holds the first page, and opening one doesn't close another. When the rail is folded to icons, the sub-menus are hidden and each section is one icon with a tooltip.
What stays in the page, and how do I connect it?
Everything. The twelve docs pages are typed in SECTIONS at the top of the file, and choosing one swaps the page's text in the block's own state; nothing is fetched. The pages are links to # whose handler shows the page instead of navigating. They're SidebarMenuSubButtons with an href, which every base renders as a link. Point them at 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, whatever its variant. The Floating and Flush switch is hidden there because it would change nothing you can see; the status line still says which look the desktop rail has. Escape or choosing a page closes the sheet and focus goes back to the menu button.
What happens when the sidebar collapses?
The menu button or the rail along the sidebar's edge folds it to a strip of section icons with tooltips, and the floating card keeps its radius and shadow. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on. For a full-page app, remove both to remember the state and get the shortcut, and give the provider your page's height instead of the window's.
Is it accessible?
The sidebar is a navigation landmark named after the product, with the sections' list named by its label and the open page marked as the current page. A section's button says whether it is expanded. The page is a scrollable region you can reach with Tab, named by its heading, and the code sample is a figure with its own caption. The Floating and Flush choice is a labeled group with arrow-key movement, and one polite status line says what changed.