Eidetic

Settings Nav

A vertical navigation component designed for settings pages with icon support and active state highlighting.

Features

  • Pre-built sections: Includes common settings sections like Profile, Security, and Notifications
  • Customizable items: Provide your own navigation items with custom labels and icons
  • Active state: Visual highlighting for the currently active section
  • Dark mode: Full support for light and dark themes
  • Accessible: Proper ARIA attributes and keyboard navigation
  • Configurable width: Adjust the nav width to fit your layout

Default Settings Nav

The default SettingsNav includes common settings sections: Profile, Notifications, Security, Billing, Team, Appearance, and Integrations.

import { SettingsNav } from '@/blocks/navigation/settings-nav'


function SettingsPage() {
 const [activeSection, setActiveSection] = useState('profile')


 return (
 <SettingsNav
 activeSection={activeSection}
 onSectionChange={setActiveSection}
 />
 )
}

Custom Items

You can provide your own navigation items with custom labels and icons.

import { SettingsNav } from '@/blocks/navigation/settings-nav'
import { Home, FileText, Bell, Lock } from 'lucide-react'


const customItems = [
 { id: 'home', label: 'Home', icon: Home },
 { id: 'documents', label: 'Documents', icon: FileText },
 { id: 'notifications', label: 'Notifications', icon: Bell },
 { id: 'privacy', label: 'Privacy', icon: Lock },
]


function CustomNav() {
 const [activeSection, setActiveSection] = useState('home')


 return (
 <SettingsNav
 items={customItems}
 activeSection={activeSection}
 onSectionChange={setActiveSection}
 />
 )
}

Custom Width

Adjust the navigation width using the width prop.

w-40 (narrow)

w-56 (wider)

<SettingsNav width="w-40" activeSection="profile" />
<SettingsNav width="w-56" activeSection="profile" />

Usage with Content Panel

Typical usage pattern with a side navigation and content area.

profile Settings

Content for the profile section would go here.

function SettingsPage() {
 const [activeSection, setActiveSection] = useState('profile')


 const renderContent = () => {
 switch (activeSection) {
 case 'profile':
 return <ProfileSettings />
 case 'notifications':
 return <NotificationSettings />
 case 'security':
 return <SecuritySettings />
 // ...other sections
 default:
 return <ProfileSettings />
 }
 }


 return (
 <div className="flex gap-8">
 <SettingsNav
 activeSection={activeSection}
 onSectionChange={setActiveSection}
 />
 <div className="flex-1 min-w-0">
 {renderContent()}
 </div>
 </div>
 )
}

Props

PropTypeDefaultDescription
itemsSettingsNavItem[]defaultSettingsItemsArray of navigation items with id, label, and icon
activeSectionstring"profile"ID of the currently active section
onSectionChange(sectionId: string) => void—Callback when a navigation item is clicked
widthstring"w-48"Tailwind width class for the nav container
classNamestring—Additional CSS classes

Accessibility

Notes

  • Uses semantic nav and ul/li elements
  • Active item marked with aria-current="page"
  • Icons marked with aria-hidden="true"
  • Keyboard navigable with Tab key
  • High contrast active state for visibility

Default Items

The component exports defaultSettingsItems which you can use or extend.

import { defaultSettingsItems } from '@/blocks/navigation/settings-nav'


// Default items include:
// - profile (User icon)
// - notifications (Bell icon)
// - security (Shield icon)
// - billing (CreditCard icon)
// - team (Users icon)
// - appearance (Palette icon)
// - integrations (Globe icon)