Sort Menu Blueprint
Static open-state sort popover with four sort options, an active checkmark, and a Desc/Asc direction toggle rendered inline without a Radix portal.
Static open-state sort popover with four sort options, an active checkmark, and a Desc/Asc direction toggle rendered inline without a Radix portal.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Sort Menu Blueprint shows the sort popover in its open state as static markup, no Radix portal involved. The toolbar strip carries an 84 results badge, a direction toggle with ArrowUp active and ArrowDown dimmed, and a Sort trigger button labelled Newest. The inline panel below the trigger lists four options (Newest checked, Oldest, Name, Priority) with a Check on the active row, and a footer row offering Desc and Asc direction buttons with Desc currently highlighted.
Sort options are one array, the panel is a plain absolutely positioned div inside a relative wrapper so the open state is always visible in the preview without needing interaction. This is the canonical blueprint pattern for popover menus in this collection.
Reach for this block when you need to show a sort popover design in a static preview or documentation page; wire it to a real Radix DropdownMenu in production pointing at your list query sort parameter.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the issue list sort menu. Other sort panels:
Tip: always keep direction independent from the sort field so changing field does not silently reset order.