Settings nav

The section list of a settings area: grouped pages, search across labels, descriptions and keywords, and the open page marked. Becomes a native select on phones. SettingsLayout puts it beside the page.

npx prodular-ui add settings-nav

Account, workspace and developer settings

Eleven pages in three groups. Keywords make SSO find Security and invite find Members.

Security

Single sign-on, two-step login and sessions

Try searching for “sso” or “invite”. Enter opens the first match.

"use client"
import * as React from "react"import {  BellIcon,  BotIcon,  BuildingIcon,  CreditCardIcon,  KeyRoundIcon,  PlugIcon,  ScrollTextIcon,  ShieldCheckIcon,  UserIcon,  UsersIcon,  WebhookIcon,} from "lucide-react"
import { SettingsLayout, SettingsNav, type SettingsNavSection } from "@/components/ui/settings-nav"
const sections: SettingsNavSection[] = [  {    id: "account",    label: "Account",    items: [      { id: "profile", label: "Profile", icon: UserIcon, description: "Name, photo, email and language", keywords: ["avatar", "timezone"] },      { id: "notifications", label: "Notifications", icon: BellIcon, description: "Email, Slack and in-app alerts", keywords: ["digest"] },    ],  },  {    id: "workspace",    label: "Workspace",    items: [      { id: "general", label: "General", icon: BuildingIcon, description: "Workspace name, URL and fiscal year", keywords: ["currency"] },      { id: "members", label: "Members", icon: UsersIcon, description: "Invite people and change roles", badge: 42, keywords: ["invite", "roles", "permissions"] },      { id: "security", label: "Security", icon: ShieldCheckIcon, description: "Single sign-on, two-step login and sessions", keywords: ["sso", "saml", "2fa", "mfa"] },      { id: "billing", label: "Billing", icon: CreditCardIcon, description: "Plan, seats, invoices and payment method", keywords: ["subscription", "upgrade"] },      { id: "ai", label: "AI", icon: BotIcon, description: "Models, data use and spend limits", badge: "New", keywords: ["model", "llm"] },    ],  },  {    id: "developers",    label: "Developers",    items: [      { id: "api", label: "API keys", icon: KeyRoundIcon, description: "Create, rotate and revoke keys", keywords: ["token"] },      { id: "webhooks", label: "Webhooks", icon: WebhookIcon, description: "Endpoints and delivery logs" },      { id: "integrations", label: "Integrations", icon: PlugIcon, description: "Slack, HubSpot, QuickBooks and more" },      { id: "audit", label: "Audit log", icon: ScrollTextIcon, description: "Who changed what, and when", keywords: ["history", "events"] },    ],  },]
const all = sections.flatMap((s) => s.items)
export default function SettingsNavWorkspace() {  const [page, setPage] = React.useState("security")  const item = all.find((i) => i.id === page)  return (    <SettingsLayout nav={<SettingsNav sections={sections} value={page} onValueChange={setPage} />} className="w-full max-w-3xl">      <div className="flex flex-col gap-1 border-b pb-5">        <h2 className="text-lg font-semibold tracking-tight">{item?.label}</h2>        <p className="text-sm text-muted-foreground">{item?.description}</p>      </div>      <p className="pt-5 text-sm text-muted-foreground">Try searching for “sso” or “invite”. Enter opens the first match.</p>    </SettingsLayout>  )}

Anatomy

<SettingsLayout nav={<SettingsNav sections={sections} value={page} onValueChange={setPage} />}>  {settingsPage}</SettingsLayout>

Guidance

Use it when

Settings and preferences with more than four pages.
keywords for the words people search for that are not in the label, like SSO, 2FA or invite.
SettingsLayout inside the App shell page area, never as a second app sidebar.

Avoid

Fewer than four pages. Use Tabs over the content.
Putting actions in the nav. Each item opens a page.

Rules for AI agents

Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.

Describe pages as sections of { id, label, icon?, href?, description?, keywords?, badge? } and pass the open page id as value.
With routing, give items an href and pass linkComponent={Link}; onValueChange still fires.
Write descriptions as what people find on the page; they show under results while searching.
Wrap the page in SettingsLayout so the nav stays sticky on wide screens and becomes a select on phones.

API

SettingsNav

Prop	Type	Default	Description
sections	SettingsNavSection[]		Groups of { id, label, items }.
value / onValueChange	string / (id, item) => void		The open page.
searchable	boolean	true	Shows the search field.
linkComponent	ElementType	"a"	Renders items with an href.

SettingsLayout

Prop	Type	Default	Description
nav / children	ReactNode		The nav column and the page.

Installation

The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.

npx prodular-ui add settings-nav# or, with the registry in components.jsonnpx shadcn@latest add @prodular/settings-nav