SideNav

sidenav-1779394025650.tsx

'use client'
import { useState } from 'react'

const NAV = [
  { id:'dashboard', icon:'📊', label:'Dashboard' },
  { id:'analytics', icon:'📈', label:'Analytics' },
  { id:'projects', icon:'📁', label:'Projects', sub:['All Projects','Recent','Archived'] },
  { id:'team', icon:'👥', label:'Team' },
  { id:'billing', icon:'💳', label:'Billing' },
  { id:'settings', icon:'⚙️', label:'Settings' },
]

export default function SideNav() {
  const [collapsed, setCollapsed] = useState(false)
  const [active, setActive] = useState('dashboard')
  const [expanded, setExpanded] = useState(new Set())
  const toggle = (id) => setExpanded(e => { const n = new Set(e); n.has(id) ? n.delete(id) : n.add(id); return n })
  return (
    <div style={{
      width:collapsed ? '64px' : '220px', background:'#1e1e2e', height:'100%', minHeight:'400px',
      borderRadius:'16px', padding:'16px 10px', display:'flex', flexDirection:'column', gap:'4px',
      transition:'width 0.25s ease', overflow:'hidden',
    }}>
      <div style={{ display:'flex', justifyContent:collapsed ? 'center' : 'flex-end', marginBottom:'12px' }}>
        <button onClick={() => setCollapsed(!collapsed)} style={{
          background:'#2d2d3d', border:'none', borderRadius:'8px', padding:'6px 10px',
          color:'#888', cursor:'pointer', fontSize:'16px',
        }}>{collapsed ? '→' : '←'}</button>
      </div>
      {NAV.map(item => (
        <div key={item.id}>
          <div
            onClick={() => { setActive(item.id); if (item.sub) toggle(item.id) }}
            style={{
              display:'flex', alignItems:'center', gap:'10px', padding:'10px 10px',
              borderRadius:'10px', cursor:'pointer', transition:'background 0.15s',
              background:active===item.id ? '#6d28d9' : 'transparent',
              color:active===item.id ? '#fff' : '#94a3b8',
            }}
          >
            <span style={{ fontSize:'18px', flexShrink:0 }}>{item.icon}</span>
            {!collapsed && <span style={{ fontSize:'14px', fontWeight:500, flex:1, whiteSpace:'nowrap' }}>{item.label}</span>}
            {!collapsed && item.sub && <span style={{ fontSize:'11px' }}>{expanded.has(item.id) ? '▾' : '▸'}</span>}
          </div>
          {!collapsed && item.sub && expanded.has(item.id) && (
            <div style={{ marginLeft:'36px', marginTop:'2px', display:'flex', flexDirection:'column', gap:'2px' }}>
              {item.sub.map(s => (
                <div key={s} style={{ padding:'7px 10px', borderRadius:'8px', fontSize:'13px', color:'#64748b', cursor:'pointer' }}
                  onMouseEnter={e => e.currentTarget.style.color='#fff'}
                  onMouseLeave={e => e.currentTarget.style.color='#64748b'}
                >{s}</div>
              ))}
            </div>
          )}
        </div>
      ))}
    </div>
  )
}

Component info

CategoryNavigation

Frameworkreact

TierFREE

Copies0

About

Collapsible sidebar navigation with icons, labels and sub-items

More from Navigation

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface FloatingDockProps {
  icons: { id: number; src: string; }[];
}

class FloatingDock extends React.Component<FloatingDockProps, {}> {
  constructor(props: FloatingDockPro

FloatingDock

Navigation

'use client'
import { useState } from 'react'

const NAV = [
  { id: 'home', icon: '◉', label: 'Overview', shortcut: 'G H' },
  { id: 'components', icon: '⬡', label: 'Components', shortcut: 'G C', badge: 120, children: [
    { id: 'buttons', label: '

SidebarNav

Navigation

'use client';

import React from 'react';

interface PaginationNavProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

const PaginationNav: React.FC<PaginationNavProps> = ({ currentPage, totalPages, onPageCh

PaginationNav

Navigation

'use client';

import React, { useState } from 'react';

interface Tab {
  id: number;
  label: string;
}

const tabs: Tab[] = [
  { id: 1, label: 'Tab 1' },
  { id: 2, label: 'Tab 2' },
  { id: 3, label: 'Tab 3' },
  { id: 4, label: 'Tab 4' },
];

c

TabsNav

Navigation