Sidebar

Complete sidebar component combining ProfileBox with navigation items. Responsive width with gap between profile and navigation.

When to use

check_circleWhen to use

  • For main app navigation
  • When you need profile + navigation combined
  • In layouts with persistent sidebar
  • For dashboard-style applications

cancelWhen not to use

  • For simple navigation without profile
  • In mobile-first designs (consider drawer)
  • When navigation items exceed screen height

Default with Navigation

With Badges

Usage

tsx
import { Sidebar } from '@/components/Sidebar';

<Sidebar
  userName="Lukas Vilkus"
  userUrl="vilkus.com"
  avatarType="logo"
  profileItems={[
    { name: 'LinkedIn', url: 'linkedin.com/in/lukasvilkus', type: 'linkedin' },
  ]}
  navItems={[
    { text: 'Overview', icon: 'apps', active: true },
    { text: 'Work', icon: 'devices' },
    { text: 'Settings', icon: 'settings' },
  ]}
/>

Props

PropTypeDefaultDescription
userName*string—User's display name
userUrl*string—User's website or handle
avatarType'logo' | 'linkedin' | 'medium' | 'emplifi' | 'chodilove''logo'Avatar icon type
profileItemsProfileItem[][]Social profile items for ProfileBox
navItemsNavItemProps[][]Navigation items to display

Accessibility

  • Uses semantic <aside> and <nav> elements
  • Navigation items indicate current page with aria-current
  • ProfileBox is keyboard accessible
  • Consider aria-label for the navigation landmark