Sidebar-style stack of icon + label rows where the active row gets a muted fill and bolder text.
The import and the props worth knowing about, in one place.
import { Nav7 } from "@/components/beste/piece/nav7";
<Nav7
tabs={[
{
"label": "Notifications",
"icon": "bell"
},
{
"label": "Billing",
"icon": "card"
},
{
"label": "Security",
"icon": "shield"
},
{
"label": "Preferences",
"icon": "settings"
}
]}
activeIndex={1}
/>Grouped sidebar menu with section labels, icon rows, optional counters, and a muted active state.
Segmented icon tabs inside a bordered tray, where the active tab flips to the foreground color.
Horizontal tabs with a thin bottom rail and a primary underline under the active label.
Mobile tab bar with labeled icons, a raised center create button, and a rose unread counter badge.