Skip to main content

​
Overview

Solarecliente provides a comprehensive set of navigation components designed to help users move efficiently through the application. All navigation components support accessibility features and responsive design. The primary navigation component for the application header.

​
Basic Usage

import { MainNav } from '@/components/navigation';

const navItems = [
  {
    label: 'Dashboard',
    href: '/dashboard',
    icon: 'home',
  },
  {
    label: 'Clients',
    href: '/clients',
    icon: 'users',
  },
  {
    label: 'Projects',
    href: '/projects',
    icon: 'briefcase',
  },
  {
    label: 'Reports',
    href: '/reports',
    icon: 'chart-bar',
  },
];

function AppLayout() {
  return (
    <MainNav items={navItems} />
  );
}
​
items
NavItem[]
required
Array of navigation items to display
Custom logo component or image
​
activeItem
string
Key of the currently active navigation item
​
onItemClick
function
Callback function when a navigation item is clicked
​
variant
'horizontal' | 'vertical'
default:"horizontal"
Navigation layout orientation

​
Nested Navigation

Create hierarchical navigation with dropdown menus. 
const navItems = [
  {
    label: 'Dashboard',
    href: '/dashboard',
    icon: 'home',
  },
  {
    label: 'Clients',
    icon: 'users',
    children: [
      {
        label: 'All Clients',
        href: '/clients',
      },
      {
        label: 'Active Clients',
        href: '/clients?status=active',
      },
      {
        label: 'Pending Clients',
        href: '/clients?status=pending',
      },
    ],
  },
  {
    label: 'Projects',
    icon: 'briefcase',
    children: [
      {
        label: 'All Projects',
        href: '/projects',
      },
      {
        label: 'In Progress',
        href: '/projects?status=in-progress',
      },
      {
        label: 'Completed',
        href: '/projects?status=completed',
      },
    ],
  },
];
Vertical navigation sidebar for app layouts. 
import { Sidebar } from '@/components/navigation';

const sidebarItems = [
  {
    label: 'Overview',
    href: '/dashboard',
    icon: 'home',
  },
  {
    label: 'Client Management',
    icon: 'users',
    children: [
      { label: 'All Clients', href: '/clients' },
      { label: 'Add Client', href: '/clients/new' },
      { label: 'Client Groups', href: '/clients/groups' },
    ],
  },
  {
    label: 'Analytics',
    href: '/analytics',
    icon: 'chart-line',
    badge: { text: 'New', variant: 'success' },
  },
];

function AppLayout({ children }) {
  return (
    <div className="flex">
      <Sidebar
        items={sidebarItems}
        collapsible
        defaultCollapsed={false}
      />
      <main className="flex-1">
        {children}
      </main>
    </div>
  );
}
​
items
NavItem[]
required
Array of sidebar navigation items
​
collapsible
boolean
default:false
Enable sidebar collapse functionality
​
defaultCollapsed
boolean
default:false
Initial collapsed state
​
width
string
default:"250px"
Sidebar width when expanded
​
collapsedWidth
string
default:"60px"
Sidebar width when collapsed
Display the user’s current location in the application hierarchy. 
import { Breadcrumbs } from '@/components/navigation';

const breadcrumbItems = [
  { label: 'Home', href: '/' },
  { label: 'Clients', href: '/clients' },
  { label: 'John Doe' },
];

<Breadcrumbs items={breadcrumbItems} />
​
items
BreadcrumbItem[]
required
Array of breadcrumb items with label and optional href
​
separator
string | ReactNode
default:"/"
Separator character or component between items
​
maxItems
number
Maximum number of items to display before collapsing
​
showIcons
boolean
default:false
Display icons for each breadcrumb item

​
Tabs Component

Organize content into tabbed interfaces. 
import { Tabs, TabList, Tab, TabPanel } from '@/components/navigation';

function ClientDetails() {
  return (
    <Tabs defaultValue="overview">
      <TabList>
        <Tab value="overview">Overview</Tab>
        <Tab value="projects">Projects</Tab>
        <Tab value="documents">Documents</Tab>
        <Tab value="activity">Activity</Tab>
      </TabList>

      <TabPanel value="overview">
        <ClientOverview />
      </TabPanel>
      <TabPanel value="projects">
        <ClientProjects />
      </TabPanel>
      <TabPanel value="documents">
        <ClientDocuments />
      </TabPanel>
      <TabPanel value="activity">
        <ClientActivity />
      </TabPanel>
    </Tabs>
  );
}

​
Tabs Props

​
defaultValue
string
Initial active tab value
​
value
string
Controlled active tab value
​
onChange
function
Callback when active tab changes
​
variant
'default' | 'pills' | 'underline'
default:"default"
Visual style variant

​
Pagination Component

Navigate through pages of content. 
import { Pagination } from '@/components/navigation';

function ClientList() {
  const [page, setPage] = useState(1);
  const pageSize = 25;
  const totalItems = 250;

  return (
    <>
      {/* Content */}
      <Pagination
        current={page}
        pageSize={pageSize}
        total={totalItems}
        onChange={setPage}
        showSizeChanger
        pageSizeOptions={[10, 25, 50, 100]}
        showTotal={(total, range) =>
          `${range[0]}-${range[1]} of ${total} items`
        }
      />
    </>
  );
}

​
Pagination Props

​
current
number
required
Current page number (1-indexed)
​
total
number
required
Total number of items
​
pageSize
number
default:10
Number of items per page
​
onChange
function
required
Callback when page changes
​
showSizeChanger
boolean
default:false
Show page size selector
​
pageSizeOptions
number[]
default:"[10, 20, 50, 100]"
Available page size options
​
showQuickJumper
boolean
default:false
Show quick page jump input
​
showTotal
function
Custom render function for total text

​
Stepper Component

Guide users through multi-step processes. 
import { Stepper, Step } from '@/components/navigation';

function InstallationWizard() {
  const [currentStep, setCurrentStep] = useState(0);

  const steps = [
    {
      title: 'Client Information',
      description: 'Basic client details',
    },
    {
      title: 'System Configuration',
      description: 'Solar panel specifications',
    },
    {
      title: 'Installation Details',
      description: 'Schedule and location',
    },
    {
      title: 'Review & Confirm',
      description: 'Review all information',
    },
  ];

  return (
    <div>
      <Stepper current={currentStep}>
        {steps.map((step, index) => (
          <Step
            key={index}
            title={step.title}
            description={step.description}
          />
        ))}
      </Stepper>

      <div className="step-content">
        {currentStep === 0 && <ClientInfoForm />}
        {currentStep === 1 && <SystemConfigForm />}
        {currentStep === 2 && <InstallationDetailsForm />}
        {currentStep === 3 && <ReviewConfirm />}
      </div>

      <div className="step-actions">
        {currentStep > 0 && (
          <Button onClick={() => setCurrentStep(currentStep - 1)}>
            Previous
          </Button>
        )}
        {currentStep < steps.length - 1 && (
          <Button onClick={() => setCurrentStep(currentStep + 1)}>
            Next
          </Button>
        )}
        {currentStep === steps.length - 1 && (
          <Button variant="primary" onClick={handleSubmit}>
            Complete
          </Button>
        )}
      </div>
    </div>
  );
}

​
Stepper Props

​
current
number
required
Current active step (0-indexed)
​
direction
'horizontal' | 'vertical'
default:"horizontal"
Stepper layout direction
​
status
'wait' | 'process' | 'finish' | 'error'
Status of the current step

​
Complete Navigation Example

import {
  MainNav,
  Sidebar,
  Breadcrumbs,
  Tabs,
} from '@/components/navigation';
import { useBreadcrumbs } from '@/hooks/useBreadcrumbs';

function AppLayout({ children }) {
  const breadcrumbs = useBreadcrumbs();

  const mainNavItems = [
    { label: 'Dashboard', href: '/dashboard', icon: 'home' },
    { label: 'Clients', href: '/clients', icon: 'users' },
    { label: 'Projects', href: '/projects', icon: 'briefcase' },
    { label: 'Reports', href: '/reports', icon: 'chart-bar' },
  ];

  const sidebarItems = [
    {
      label: 'Overview',
      href: '/dashboard',
      icon: 'home',
    },
    {
      label: 'Client Management',
      icon: 'users',
      children: [
        { label: 'All Clients', href: '/clients' },
        { label: 'Add Client', href: '/clients/new' },
        { label: 'Import', href: '/clients/import' },
      ],
    },
    {
      label: 'Projects',
      icon: 'briefcase',
      children: [
        { label: 'All Projects', href: '/projects' },
        { label: 'Create Project', href: '/projects/new' },
        { label: 'Templates', href: '/projects/templates' },
      ],
    },
    {
      label: 'Analytics',
      href: '/analytics',
      icon: 'chart-line',
    },
  ];

  return (
    <div className="app-layout">
      <MainNav items={mainNavItems} />
      <div className="flex">
        <Sidebar
          items={sidebarItems}
          collapsible
          defaultCollapsed={false}
        />
        <main className="flex-1">
          <div className="p-6">
            <Breadcrumbs items={breadcrumbs} />
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}

​
Best Practices

Clear Labels

Use clear, concise labels that accurately describe destinations

Active States

Always indicate the current location with clear visual feedback

Keyboard Navigation

Ensure all navigation is accessible via keyboard shortcuts

Mobile Responsive

Provide mobile-friendly navigation patterns like hamburger menus

Build docs developers (and LLMs) love

Get started for freeTalk to us