Role-Based Navigation

Adaptive

Navigation

Navigation that adapts based on user role and usage frequency, optimizing the interface for each user's workflow.

Preview

Navigation that adapts based on user role and usage frequency

Role-Based Nav

Adapts to your role

Primary Navigation

Quick Actions

Navigation order optimized based on your usage frequency

Props

Component API reference

RoleBasedNavigation

Prop	Type	Default	Description
`defaultRole`	`RoleKey`	`'product-manager'`	Default selected role
`role`	`RoleKey`	—	Controlled role value
`onRoleChange`	`(role: RoleKey) => void`	—	Called when role changes
`roles`	`Role[]`	`Default roles`	Available roles configuration
`onNavClick`	`(item, roleId) => void`	—	Called when nav item is clicked
`onQuickActionClick`	`(action, roleId) => void`	—	Called when quick action is clicked
`aiMessage`	`string`	`'Navigation order optimized...'`	AI optimization message
`className`	`string`	—	Additional CSS classes

Types

type RoleKey = 'product-manager' | 'developer' | 'designer' interface Role { id: RoleKey label: string primaryNav: string[] quickActions: string[] }

Usage

Import and implementation examples

import { RoleBasedNavigation } from '@/components/ui/role-based-navigation'

// Basic usage with defaults
<RoleBasedNavigation />

// Controlled component
<RoleBasedNavigation
  defaultRole="product-manager"
  onRoleChange={(role) => console.log('Role changed:', role)}
  onNavClick={(item, roleId) => {
    console.log('Nav item clicked:', item, 'for role:', roleId)
  }}
  onQuickActionClick={(action, roleId) => {
    console.log('Quick action:', action, 'for role:', roleId)
  }}
  aiMessage="Navigation order optimized based on your usage frequency"
/>

// Custom roles configuration
const customRoles = [
  {
    id: 'admin',
    label: 'Administrator',
    primaryNav: ['Dashboard', 'Users', 'Settings', 'Logs'],
    quickActions: ['Add User', 'View Reports', 'System Settings']
  },
  {
    id: 'user',
    label: 'User',
    primaryNav: ['Dashboard', 'Profile', 'Help'],
    quickActions: ['New Request', 'View History']
  }
]

<RoleBasedNavigation roles={customRoles} />

This block is self-contained (no UI component dependencies)

Features

Built-in functionality

Multiple role types: Support for Product Manager, Developer, Designer roles
Usage frequency tracking: AI-powered optimization based on navigation patterns
Adapted primary navigation: Different nav items for each role
Quick actions: Role-specific quick action shortcuts
AI optimization indicators: Visual feedback on AI-driven improvements
Custom layouts: Personalized based on user behavior
Controlled mode: Both controlled and uncontrolled usage
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses role="navigation" for main containerrole="tablist" for role selectionaria-selected for active roleProper button semantics for all actions

Keyboard Navigation

Key	Action
`Tab`	Navigate between roles and items
`Enter/Space`	Select role or activate item
`Arrow Keys`	Navigate within role selector

Notes

Focus management on role change
Screen reader announces role changes
AI optimization message is accessible

Related Components

Vertical Sidebar Horizontal Nav Tabs