Docs-style on-this-page list with left borders and a primary active rail on the current section.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Nav22 } from "@/components/beste/piece/nav22";
<Nav22
title="On this page"
links={[
{
"label": "Overview",
"anchor": "#overview"
},
{
"label": "Installation",
"anchor": "#installation",
"active": true
},
{
"label": "Usage",
"anchor": "#usage"
},
{
"label": "API reference",
"anchor": "#api"
},
{
"label": "Troubleshooting",
"anchor": "#trouble"
}
]}
/>Horizontal tabs with a thin bottom rail and a primary underline under the active label.
Numbered pagination with prev/next chevrons, ellipsis truncation, and a filled primary active tile.
Numbered pagination with prev/next arrows and ellipses for long ranges. Active page flips to foreground.
Classic folder-style tabs that sit on a rail, with the active tab bordered and notched into the panel.
Grouped sidebar menu with section labels, icon rows, optional counters, and a muted active state.
Sidebar-style stack of icon + label rows where the active row gets a muted fill and bolder text.