Vertical segmented control
Stacked options for desktop sidebars, with an indicator that slides up and down to the active one.
Settings
Code
<div class="uv-fsv"><span class="p"></span><button class="on">Overview</button><button>Design</button><button>Code</button><button>Settings</button></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
Where to use it
Think of the settings page of a web app: Overview, Billing, Team and Notifications stacked on the left while the content changes on the right. The sliding block shows where you are without a heavy menu. It also works for documentation sections or a store's account area. Also known as vertical tabs or sidebar navigation in CSS.
Keep it to five or six items, and give it a fixed width so the indicator doesn't jump when labels differ in length. On phones, a vertical list takes up a lot of room; switch to horizontal chips or a dropdown there.