Skip to main content
Urbicon UI
← Back to Recipes

Filter Sidebar

A filterable results page where the filter panel is a persistent left rail on desktop and a slide-in overlay on mobile — the exact lifecycle Sidebar mode="responsive" exists for. No backdrop or focus-trap on the desktop rail (that would be a Drawer); the panel is part of the page shell.

Sidebar Input RadioGroup Slider SegmentGroup Checkbox Card Button Badge

Live Preview

Resize the window across 1024px to switch lifecycles: above it the filter rail is a persistent part of the shell; below it a funnel button opens the same panel as a backdropped overlay. The preview is scoped to the box below — in a real app the Sidebar is page-fixed and the main content offset is a plain lg:pl-72.

10 homes

Sunlit loft near the canal

Apartment
Kreuzberg 2 beds
Balcony Pets allowed
€1,650 / month

Studio above the bakery

Studio
Neukölln Studio
Furnished
€890 / month

Altbau with herringbone floors

Apartment
Prenzlauer Berg 3 beds
Balcony Parking
€2,200 / month

Garden house on a quiet Hof

House
Pankow 4 beds
Parking Pets allowed Balcony
€2,650 / month

Compact flat by the U-Bahn

Apartment
Wedding 1 bed
Furnished
€1,180 / month

Furnished studio, all-inclusive

Studio
Mitte Studio
Furnished Balcony
€1,350 / month

Family house with a yard

House
Köpenick 4 beds
Parking Pets allowed
€2,400 / month

Bright two-room by the park

Apartment
Friedrichshain 2 beds
Balcony
€1,490 / month

Top-floor flat with elevator

Apartment
Charlottenburg 2 beds
Parking Furnished
€1,780 / month

Cozy pet-friendly single

Apartment
Neukölln 1 bed
Pets allowed
€990 / month

Key Features

  • Persistent on desktop, overlay on mobile via Sidebar mode="responsive" — no backdrop or focus-trap on the desktop rail
  • Live client-side filtering: a single $derived recomputes the result grid on every control change — no Apply step on desktop
  • Mixed filter controls — Input search, RadioGroup property type, range Slider for rent, SegmentGroup bedrooms, Checkbox amenities
  • Mobile funnel trigger opens the same Sidebar as a backdropped overlay; a "Show N results" button dismisses it
  • Active-filter count drives both the Reset button and the mobile trigger badge
  • Empty state with a one-tap Reset when no listing matches

Why Sidebar, not Drawer

The panel is page shell

On desktop the filters are always present and the results reflow beside them — there is no backdrop, no focus-trap, and nothing to dismiss. That is a Sidebar. A Drawer is a modal <dialog>: backdrop and focus-trap are non-optional, which is wrong for a panel you want visible while you scan results.

One panel, two lifecycles

mode="responsive" keeps the same markup for both: persistent above 1024px, a backdropped slide-in overlay below it. The open prop only governs the mobile overlay — on desktop the rail ignores it and stays visible.

No Apply on desktop

Because the rail is not modal, filtering is live — a single $derived recomputes the grid as you toggle controls. The mobile overlay adds a Show N results button purely as a "done" affordance to close the sheet; it commits nothing that was not already applied.

Offset the main content

The Sidebar is position: fixed, so its --sidebar-width CSS var inherits only inside its own subtree. Offset the sibling main region by hand — lg:pl-72 matches width="18rem". For a ready-made app shell that wires the offset and mobile header for you, reach for SidebarLayout instead.

Filter Sidebar Recipe

Loading syntax highlighting...