@kopexa/navigation

Navigation components for the Kopexa Sight Design System.

Overview

@kopexa/navigation provides accessible, composable navigation components for building breadcrumbs and other navigation patterns in React applications.

• Author: Kopexa (https://kopexa.com)
• License: Apache-2.0
• Repository: kopexa-grc/sight

Features

• Breadcrumb: Fully accessible breadcrumb navigation with customizable separators
• Composable: Flexible component architecture for custom layouts
• Router-agnostic: Works with any routing solution via render props
• TypeScript-first: Fully typed APIs for maximum safety and DX

Installation

pnpm add @kopexa/navigation
# or
yarn add @kopexa/navigation
# or
npm install @kopexa/navigation

Usage

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@kopexa/navigation';

function MyBreadcrumb() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Current Page</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

With Next.js Link

import Link from 'next/link';
import { BreadcrumbLink } from '@kopexa/navigation';

<BreadcrumbLink render={<Link href="/docs" />}>Docs</BreadcrumbLink>

Components

| Component | Description | |-----------|-------------| | Breadcrumb | Root wrapper with context for separator | | BreadcrumbList | Ordered list container | | BreadcrumbItem | List item wrapper | | BreadcrumbLink | Clickable navigation link | | BreadcrumbPage | Current page indicator (non-clickable) | | BreadcrumbSeparator | Visual separator between items | | BreadcrumbEllipsis | Collapsed items indicator |

License

Apache-2.0 © Kopexa